SafariのCSSトランジションは、他のブラウザと比べて不安定です。

Question

Safariで滑らかなCSSトランジションを作成しようとするのは本当に苦労しています。 JavaScriptのonclickイベントで高さを変更してdivを表示/非表示しようとしています。結果として生じる遷移は、Chrome、Firefox、およびEdgeでうまく滑らかです。しかし、Safariの場合、レンダリング時には約15fpsでなければなりません。

基本JSFiddleはここにある：私が働いているhttps://jsfiddle.net/q5a9b62s/6/

ウェブサイトはここにある：http://www.allinimages.ch/

感謝。

Answer 1

あなたはあなたにこのようなdivをclassNameを追加するにはJavaScriptを使用して試みることができる：

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と記載されています。