Переходы CSS на Safari - прерывистые по сравнению с другими браузерами

Question

Я действительно пытаюсь создать плавные переходы CSS в Safari. Я пытаюсь скрыть/показать divs, изменив их высоту с помощью события JavaScript onclick. Полученные переходы приятны и гладки с Chrome, Firefox и Edge. Однако с Safari он выглядит плохо и должен составлять около 15 кадров в секунду при рендеринге.

А основной JSFiddle здесь: https://jsfiddle.net/q5a9b62s/6/

На сайте я работаю здесь: http://www.allinimages.ch/

Спасибо.

Answer 1

Вы могли бы попытаться добавить className вам div как это с помощью 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.