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，则转换再次工作。但是，我不能这样做，因为它是一个流体场地，面板坍塌的宽度需要是静态的，而不是相对的。

我尝试在%中添加一个%，但这并没有帮助。如对此有任何建议，将不胜感激。

Answer 1

width上的转换是一个问题。试试max-width。

Answer 2

在我的经验中，转换width是有问题的。您可以将其转换为使用left和right值，而不是使用宽度。width: 20%;将与left: 80%; right: 0;相同，width: 50%;将成为left: 25%; right: 25%;。这是一个代码https://codepen.io/anon/pen/JWaJzN

​

document.getElementById("wrapper").addEventListener("click", function(){
  if (this.classList.contains('center')) {
    this.classList.remove('center');
  }
  else {
   this.classList.add('center');
  }
});

.container { 
  width: 550px;
  height: 250px;
  position: relative;
  background-color: teal;
}

#wrapper {
  height: 20%;
  top: 0;
  right: 0;
  left: 80%;
  position: absolute;
  transform-origin: top left;
  transition: all 1s ease;
}

#wrapper.center {
  top: 50%;
  left: 25%;
  right: 25%;
  transform: translateY(-50%);
}

#card {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 1s ease;
}


h3 {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
}

<section class="container">
  
  <div id="wrapper">
    <div id="card">
      <h3>click here</h3>
    </div>
  </div>
  
</section>

​