与其他浏览器相比，Safari上的CSS转换不稳定 [英] CSS transitions on Safari are choppy vs. other browsers

问题描述

我真的很想在Safari中创建平滑的CSS过渡。我试图通过JavaScript onclick 事件更改高度来隐藏/显示div。通过Chrome，Firefox和Edge，所产生的过渡非常流畅。但是使用Safari时，它看起来很糟糕，渲染时必须大约为15 fps。

I'm really struggling trying to create smooth CSS transitions in Safari. I'm trying to hide/show divs by changing their height with a JavaScript onclick event. The resulting transitions are nice and smooth with Chrome, Firefox, and Edge. However with Safari it just looks bad and must be around 15 fps when rendering.

一个基本的JSFiddle就在这里： https://jsfiddle.net/q5a9b62s/6/

A basic JSFiddle is here: https://jsfiddle.net/q5a9b62s/6/

我正在研究的网站是在这里： http://www.allinimages.ch/

The website I'm working on is here: http://www.allinimages.ch/

谢谢。

推荐答案

您可以尝试使用JavaScript添加 className 给你 div 这样：

You could try using JavaScript to add a className to you div like this:

    function grow() {
      var element = document.getElementById("boxid");
      if (!element.className) {
        element.className = 'tall';
      } else {
        element.className = '';
      }
    };

我添加了 className的无效启用动画切换。

I've added the nullification of the className to enable toggling of the animation.

然后，让CSS处理为您完成所有转换：

Then, let CSS processing do all of the transforming for you:

    #boxid {
      background-color: red;
      width: 50px;
      height: 50px;
      position: relative;
      -webkit-transition: height 0.3s ease; 
        transition: height 0.3s ease;
    }

    #boxid.tall {
      height: 500px;
      -webkit-transition: height 0.3s ease; 
      transition: height 0.3s ease;
      transform: translate3d(100) /* this property ensures GPU processing cross-browser */
    }

Codepen示例是此处。

Codepen example is here.

关于平滑CSS转换的精彩文章是这里。

Great article on smooth CSS transitions is here.

跨浏览器使用 translate3d 的一些问题是记录此处。

Some issues for cross-browser use of translate3d are documented here.

这篇关于与其他浏览器相比，Safari上的CSS转换不稳定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！