Подтвердить что ты не робот

Почему моя анимация 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. Что это и как я могу исправить?

ЧТО Я СМОТРЕТЬ НА:

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

CODE:

HTML

<div class="marquee">
    <ul>
        <li>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
        </li>
        <li>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
        </li>
        <li>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><img class="marquee-itm" src="Vendors/Images/Objective-c-logo.png" /></a> 
            <a href="#" onclick="location.href='https://developer.apple.com/swift/'; return false;"><img class="marquee-itm" src="Vendors/Images/Apple_Swift_Logo.png" /></a>
            <a href="#" onclick="location.href='https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/ProgrammingWithObjectiveC/Introduction/Introduction.html'; return false;"><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%;
}

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

РЕДАКТИРОВАТЬ 1:

Профайлер Google Chrome (вариант 1):

введите описание изображения здесь

Профайлер Google Chrome (опция 2 (моментальный снимок)):

введите описание изображения здесь

ИЗМЕНИТЬ 2:

Переход CSS3 не является гладко в Chrome

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

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

ИЗМЕНИТЬ 3:

Google Timeline (после удаления gravity.js):

введите описание изображения здесь

РЕДАКТИРОВАТЬ 4:

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

РЕДАКТИРОВАТЬ 5:

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

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

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.

Является ли Chrome менее мощным?

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

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

ОБНОВЛЕНИЕ 6:

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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.

Является ли Chrome менее мощным?

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

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

ОБНОВЛЕНИЕ 6:

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

Ответ 2

РЕШЕНИЕ:

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

ОБЪЯСНЕНИЕ:

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

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

  • (1) заставить Google исправлять Chrome или

  • (2) используйте решение, которое будет работать с Chrome или

  • (3) признать, что Chrome не будет гладким с Chrome.

TL; ДР:

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

Ответ 3

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

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

backface-visibility: hidden;
perspective: 1000;

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

Ответ 4

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

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

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