为什么Safari会改变这些非画布元素的宽度？

Question

我在OSX上的Safari中出现了奇怪的行为，在iOS上使用这种CSS驱动的radiobox多选形式我正在努力...

http://s.codepen.io/achisholm/debug/jPzzzB

与编辑器相同的页面可见... http://codepen.io/achisholm/pen/jPzzzB?editors=110

在.3s过渡期间，请注意multi-form__option-content元素的宽度在打开和关闭时似乎从0到100％。

它不会发生在任何其他浏览器上，只有Safari。为什么会发生这种情况？如何防止它？

Answer 1

您可以将transition: all .3s ease;更改为transition: height .3s ease;

  &__option-content {
    overflow: hidden;
    transition: height .3s ease; /*this one*/
    height: 0;
    padding: 0 20px 0px 50px;
    line-height: 1.6;

http://codepen.io/anon/pen/MwVXNb