Safari css 宽度过渡不适用于不同的单位测量

Posted

技术标签:

【中文标题】Safari css 宽度过渡不适用于不同的单位测量【英文标题】:Safari css width transition not working with different unit measurements 【发布时间】:2013-09-07 02:32:24 【问题描述】:

我在 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%;

问题似乎在于测量单位的差异。悬停过渡按预期工作(remrem),但是“面板打开”上的宽度过渡(rem%)会跳过过渡并直接打开。如果我将默认宽度切换为百分比而不是rem,则转换再次起作用。但是我不能这样做,因为它是一个流动的站点,并且面板折叠的宽度需要是静态的而不是相对的。

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

【问题讨论】:

请在此处或 jsfiddle 中提供示例。 .panel-1.panel-2.panel-3之间是什么关系?请提供 html 或有效的 jsFiddle。 LE:我刚刚注意到这个问题的日期。谢尔盖,我想知道是否值得对其进行编辑并将其带回。 BigRedEd 可能忘记了他现在有一个 SE 帐户。 【参考方案1】:

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

【讨论】:

【参考方案2】:

根据我的经验,转换 width 是有问题的。您可以将其转换为使用 leftright 值而不是使用宽度。 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>

【讨论】:

以上是关于Safari css 宽度过渡不适用于不同的单位测量的主要内容,如果未能解决你的问题,请参考以下文章

Safari浏览器上的css变换+宽度+左+顶部过渡跳转

css 过渡持续时间不适用于矢量效果:非缩放笔画

为啥 Intl.NumberFormat 不适用于 Safari 和 Firefox 中的单位?

CSS过渡动画不适用于减小图像的大小

CSS过渡不适用于height属性[重复]

CSS过渡不适用于变换:翻译