为什么 Safari 会更改这些 off-canvas 元素的宽度？

Question

我在 OSX 上的 Safari 中出现奇怪的行为，在 iOS 上更明显，我正在使用这个 CSS 驱动的单选框多 select 表单在...

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

为什么 Safari 会更改这些 off-canvas 元素的宽度？

Why is Safari changing the width of these off-canvas elements?

css

safari

mobile-safari