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

我在Safari中遇到-webkit-transition问题。这些转换在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，但这没有帮助。如有任何建议，我们将不胜感激。

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

根据我的经验，转换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>

相关内容

最新更新

热门标签：