Safari css宽度转换不适用于不同的单位测量

Question

我-webkit-transition在Safari中遇到了问题.这些转换在Chrome,FF和IE10中运行良好(使用非前缀转换属性).

在我的网站中,有3个面板可供查看.主窗口默认打开,另外2个窗口右侧折叠显示其内容的条子.单击折叠面板时,会通过JS向其添加其他类,并将其转换为100%宽度.

CSS:

.panel-1{
  width: 100%;
}

.panel-2{
    width: 8rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 500;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-2:hover{
     width: 10rem;
}

.panel-2.panel-open{
     width: 100%;
}

.panel-3{
    width: 4rem;
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    z-index: 501;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}

.panel-3:hover{
     width: 6rem;
}

.panel-3.panel-open{
     width: 100%;
}

问题似乎与测量单位的差异有关.悬停过渡按预期(rem到rem)工作,但"面板打开"上的宽度过渡(rem到%)跳过过渡并快速打开.如果我将默认宽度切换为百分比而不是rem,则转换再次起作用.我不能这样做,因为它是一个流体站点,面板折叠宽度需要是静态的而不是相对的.

我试图添加min-width的%,但是这并没有帮助.对此有任何建议将不胜感激.

Answer 1

过渡width是一个问题。尝试max-width。