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

我对Safari中的

-webkit转换有问题。这些转换在Chrome、FF和IE10中工作良好（使用无前缀的转换属性）

在我的网站中，有3个面板可以查看。默认情况下，主窗口打开，其他两个窗口折叠在窗口右侧，显示其内容的一小部分。单击折叠面板时，会通过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
，则转换将再次工作。但我不能这样做，因为这是一个流体场地，面板折叠宽度需要是静态的，而不是相对的

我曾尝试在
%
中添加
最小宽度
，但没有效果。如果您对此有任何建议，我们将不胜感激。
宽度上的过渡是一个问题。尝试
max width
转换
宽度
在我的经验中是有问题的。您可以将其转换为使用
left
和
right
值，而不是使用width<代码>宽度：20%将与
左：80%相同；右：0和
宽度：50%将
左：25%；右：25%。这是一支密码笔


document.getElementById（“包装器”）.addEventListener（“单击”，函数（）{
if（this.classList.contains（'center'））{
这个.classList.remove（'center'）；
}
否则{
this.classList.add（'center'）；
}
});
.container{
宽度：550px；
高度：250px；
位置：相对位置；
背景色：青色；
}
#包装纸{
身高：20%；
排名：0；
右：0；
左：80%；
位置：绝对位置；
变换原点：左上角；
过渡：所有的1容易；
}
#包装中心{
最高：50%；
左：25%；
右：25%；
转化：translateY（-50%）；
}
#卡片{
宽度：100%；
身高：100%；
位置：相对位置；
过渡：所有的1容易；
}
h3{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：红色；
}

点击这里
请在此或jsfiddle中提供示例。
.panel-1
、
.panel-2
和
.panel-3
之间的关系是什么？请提供html或工作JSFIDLE。乐：我刚注意到这个问题的日期。谢尔盖，我想知道是否值得编辑它并把它带回来。比格利德可能忘了他现在有一个SE帐户。