Safari上的CSS過渡與其他瀏覽器相比起波紋

我真的很努力在Safari中創建平滑的CSS過渡。我試圖通過使用JavaScript onclick事件更改高度來隱藏/顯示div。 Chrome，Firefox和Edge所產生的轉換非常順利。但使用Safari時，它看起來很糟糕，渲染時必須大約15 fps。Safari上的CSS過渡與其他瀏覽器相比起波紋

一個基本的jsfiddle是在這裏：https://jsfiddle.net/q5a9b62s/6/

網站我的工作是在這裏：http://www.allinimages.ch/

感謝。

來源

2016-10-27 mcmartin

Choppiness對我來說看起來是一樣的，瀏覽器到瀏覽器。嘗試將所有轉換移動到CSS。 – jacefarm

你可以嘗試使用JavaScript來一個className添加到您div這樣的：

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

我已經添加了className的廢止，使動畫的切換。

然後，讓CSS處理做的所有轉化爲你：

#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例子是here。

關於平滑CSS過渡的好文章是here。

有關跨瀏覽器使用translate3d的一些問題記錄在here。

來源

2016-10-27 18:12:38 jacefarm

Safari上的CSS過渡與其他瀏覽器相比起波紋

回答

相關問題