Почему моя анимация CSS3 не гладкая в Google Chrome (но очень гладкая в других браузерах)?

МОЕ ОКРУЖЕНИЕ (ГДЕ ПОЛУЧИТЬ LAG):Почему моя анимация CSS3 не гладкая в Google Chrome (но очень гладкая в других браузерах)?

Mac OSX El Capitan 10.11.2 на Chrome версии 50.0.2661.102 (64-разрядная версия)

CODEPEN:

http://codepen.io/vieron/pen/hnEev

АНИМАЦИЯ:

СИТУАЦИЯ:

Я гугле это много, не находя ничего, что работает для меня. Я знаю, что эти вопросы задавали раньше.

Анимация CSS3 гладкая на моем Mac, когда я открываю веб-сайт с Safari и Firefox, но не с Chrome!

Как ни странно, оригинальная CodePen гладкая на Chrome.

ПРОБЛЕМА:

Что-то в моем коде вызывает анимация быть изменчивым только на Chrome. Что это такое и как я могу это исправить?

ЧТО Я Смотрела:

Chrome CSS 3 Transition Not Smooth

Мне нужно располагать, чтобы быть относительно адаптации к различным размерам экрана.

КОД:

HTML

<div class="marquee"> 
    <ul> 
     <li> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
     </li> 
     <li> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
     </li> 
     <li> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
      <a href="https://developer.apple.com/swift/"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a> 
      <a href="https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
     </li> 
    </ul> 
</div>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 
@-webkit-keyframes loop { 
    0% { 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    100% { 
    -moz-transform: translateX(-66.6%); 
    -ms-transform: translateX(-66.6%); 
    -webkit-transform: translateX(-66.6%); 
    transform: translateX(-66.6%); 
    } 
} 
@-moz-keyframes loop { 
    0% { 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    100% { 
    -moz-transform: translateX(-66.6%); 
    -ms-transform: translateX(-66.6%); 
    -webkit-transform: translateX(-66.6%); 
    transform: translateX(-66.6%); 
    } 
} 
@-ms-keyframes loop { 
    0% { 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    100% { 
    -moz-transform: translateX(-66.6%); 
    -ms-transform: translateX(-66.6%); 
    -webkit-transform: translateX(-66.6%); 
    transform: translateX(-66.6%); 
    } 
} 
@keyframes loop { 
    0% { 
    -moz-transform: translateX(0); 
    -ms-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    } 
    100% { 
    -moz-transform: translateX(-66.6%); 
    -ms-transform: translateX(-66.6%); 
    -webkit-transform: translateX(-66.6%); 
    transform: translateX(-66.6%); 
    } 
} 
.cssanimations .marquee { 
    position: relative; 
    width: 90%; 
    margin: auto; 
    overflow: hidden; 
} 
.cssanimations .marquee > ul { 
    list-style: none; 
    position: relative; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 300% !important; 
    height: 80px; 
    -webkit-animation-play-state: running; 
    -moz-animation-play-state: running; 
    -o-animation-play-state: running; 
    animation-play-state: running; 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    -webkit-animation: loop 20s linear infinite; 
    -moz-animation: loop 20s linear infinite; 
    -o-animation: loop 20s linear infinite; 
    animation: loop 20s linear infinite; 
} 
.cssanimations .marquee > ul > li { 
    white-space: normal; 
    position: relative; 
    text-align: justify; 
    text-justify: distribute-all-lines; 
    line-height: 0; 
    letter-spacing: -0.31em; 
    float: left; 
    width: 33.333333%; 
    overflow: hidden; 
    height: 80px; 
} 
.cssanimations .marquee > ul > li:before { 
    content: ''; 
    position: relative; 
    height: 100%; 
    width: 0; 
} 
.cssanimations .marquee > ul > li:before, 
.cssanimations .marquee > ul > li > * { 
    vertical-align: middle; 
    display: inline-block; 
} 
.cssanimations .marquee > ul > li:after { 
    content: '.'; 
    display: inline-block; 
    height: 0 !important; 
    width: 100%; 
    overflow: hidden !important; 
    visibility: hidden; 
    font-size: 0; 
    word-spacing: 100%; 
} 
.cssanimations .marquee > ul > li > * { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: left; 
    line-height: 1; 
    letter-spacing: 0; 
} 
.cssanimations .marquee > ul > li img { 
    margin: 0 1.6%; 
} 


.marquee ul li a{ 
    display: inline-block; 
    height: 80%; 
} 

.marquee ul li a img { 
    max-height: 100%; 
}

JS ССЫЛКИ НА HTML

<script src="Vendors/js/modernizr.js" type="text/javascript"></script> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

ВАЖНО N.B .:

Единственное, что я добавил к CodePen:

.marquee ul li a{ 
    display: inline-block; 
    height: 80%; 
} 

.marquee ul li a img { 
    max-height: 100%; 
}

Удаление это не решает проблему.

EDIT 1:

Google Chrome Profiler (вариант 1):

Google Chrome Profiler (вариант 2 (Snapshot)):

EDIT 2:

CSS3 transition not smooth in Chrome

я, кажется, только что нашел странное поведение в моей анимации. Он «растет» (увеличивается) каждый раз, когда я ухожу из поля зрения и обратно, прокручивая его.

Такое поведение похоже на то, что описано в ответе на вопрос выше. Но указание фиксированной ширины, как указано, не устраняет отставание.

EDIT 3:

Google Timeline (после снятия тяжести.JS):

EDIT 4:

Это странно. После комментирования и раскодирования некоторых строк (в основном, вернувшись к тому, что было в коде, когда было отставание), производительность анимации стала лучше. Не так гладко, как в Safari или Firefox, но все же более гладко.

EDIT 5:

Я нашел "виновника".

Я использую другой codepen в заголовке моего сайта:

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> 
#stars 
#stars2 
#stars3 
#title 
    %span 
    PURE CSS 
    %br 
    %span 
    PARALLAX PIXEL STARS

Удаление его делает другой анимации гладкой.

Тем не менее:

Это не объясняет, почему все гладко в Firefox и Safari, но не в Chrome.

Is Chrome менее мощный?

Я отправил отчет в Chrome и надеюсь, что они ответят здесь, но нет никакой гарантии.

Если кто-то может получить ответ от Google/Chrome, я награждаю его/ее щедростью.

UPDATE 6:

Пробовал на Opera браузер. Точно такое же отставание! Теперь мы знаем, что это проблема с движком рендеринга BLINK!

источник

2016-06-04 Coder1000

Предложение: добавьте демоверсию, которая воспроизводит проблему (включая разметку) и удаляет теги [javascript] и [jquery], если они не связаны с вопросом. –

* «Как ни странно, Codepen работает ровно даже с Chrome.«* - Это указывает на разницу между фактическим сайтом и кодефеем. Продолжайте добавлять части сайта к кодепуну, пока не воспроизведете проблему, и вы, вероятно, нашли причину. – GolezTrol

@GolezTrol Действительно! Но я только добавил очень мало строк кода и их удаление ничего не изменили :( – Coder1000

Я нашел «преступника».

Я использую другой codepen в заголовке моего сайта:

https://codepen.io/saransh/pen/BKJun

<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> 
#stars 
#stars2 
#stars3 
#title 
    %span 
    PURE CSS 
    %br 
    %span 
    PARALLAX PIXEL STARS

Удаление его делает другой анимации гладкой.

Тем не менее:

Это не объясняет, почему все гладко в Firefox и Safari, но не в Chrome.

Is Chrome менее мощный?

Я отправил отчет в Chrome и надеюсь, что они ответят здесь, но нет никакой гарантии.

Если кто-то может получить ответ от Google/Chrome, я награждаю его/ее щедростью.

UPDATE 6:

Пробовал на Opera браузер. Точно такое же отставание! Теперь мы знаем, что это проблема с движком рендеринга BLINK!

источник

2016-06-13 15:40:30 Coder1000

@JonSkeet Не могли бы вы переслать это команде Chrome (если можете)? Это было бы здорово: D – Coder1000

РЕШЕНИЕ:

Используйте абсолютное позиционирование с @media для различных размеров экрана.

ОБЪЯСНЕНИЕ:

Он работает для всех остальных браузеров, а не Chrome, так что вы делаете, будет специально для Chrome.

Это дает вам 3 варианта:

(1) получить Google исправить Chrome или
(2) использовать решение, которое будет работать с Chrome или
(3) согласитесь, он не будет гладко с Chrome.

TL; DR:

Вы знаете, абсолютное позиционирование будет работать.

источник

2016-06-12 12:02:02 HenryM

Я не хочу использовать абсолютное позиционирование, но thx для вашего ответа. – Coder1000

Чтобы сделать анимацию лучше, вы можете использовать свойство will-change CSS. Это свойство подсказывает браузеру, что элемент изменится.

https://developer.mozilla.org/en/docs/Web/CSS/will-change

Вы можете прочитать здесь больше о will-change.

источник

2016-06-22 11:07:27

Chrome поддерживает аппаратное ускорение при рендеринге, улучшая производительность для анимации css3. Вы можете trigger hardware acceleration, применяя translateZ(0), rotateZ(360deg) или аналогичные трюки Chrome в него.

После того, как вы используете аппаратное ускорение, применяя трюк выше (или, если вы уже использовали его, но привел пример кода, был неполным и/или библиотека третьей стороны заботилась о нем для вас), вы можете дополнительно повысить производительность за счет применения, с приставками по мере необходимости:

backface-visibility: hidden; 
perspective: 1000;

Это также помогает решить некоторые проблемы, когда GPU интегрирован и/или дросселирования (думаю, режим экономии энергии), и его производительность деградирует. Это объясняет проблемы с производительностью параллакса на macbook! ¯ \ _ (ツ) _/¯

источник

2016-06-22 20:53:56

Почему моя анимация CSS3 не гладкая в Google Chrome (но очень гладкая в других браузерах)?

ответ

Смежные вопросы