Анимация зависает на FF в IE, но не на Chrome

У меня в аниматоре есть анимация с прядильной загрузкой, которая продолжает замерзать в FF и IE, когда она выполняет тяжелое js-исполнение, но работает отлично в chrome, когда происходит тяжелое js-исполнение ,Анимация зависает на FF в IE, но не на Chrome

Я сделал плункер, чтобы продемонстрировать эту проблему. Я сделал три разных из-за разной производительности в разных браузерах. Единственное различие между ними - количество повторений элементов. Не уверен, зависит ли он от компьютера, в этом случае, возможно, вы можете изменить количество элементов, чтобы получить небольшой удар производительности.

В этом Chrome version анимация прядильника продолжает вращаться, когда я повторно заполняю список, хотя вы можете видеть, что требуется некоторое время до обновления ng-repeat.

В этом FireFox version и IE version прядильщик останавливается в анимации, когда список заселен.

CSS-код:

.spinner-container { 
    position: absolute; 
    top: 40%; 
    left: 50%; 
} 

#preloader { 
    margin: 0 auto; 
    font-size: 10px; 
    position: relative; 
    text-indent: -9999em; 
    border-top: 1.1em solid red; 
    border-right: 1.1em solid red; 
    border-bottom: 1.1em solid red; 
    border-left: 1.1em solid green; 
    -webkit-animation: load8 1.1s infinite linear; 
    animation: load8 1.1s infinite linear; 
} 
#preloader, 
#preloader:after { 
    border-radius: 50%; 
    width: 80px; 
    height: 80px; 
} 
@-webkit-keyframes load8 { 
    0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
} 
@keyframes load8 { 
    0% { 
    -webkit-transform: rotate(0deg); 
    transform: rotate(0deg); 
    } 
    100% { 
    -webkit-transform: rotate(360deg); 
    transform: rotate(360deg); 
    } 
}

Кто-нибудь знает, почему это может быть и решение для этого?

Конечно, мы попробуем и реорганизуем «тяжелое js-исполнение», но это, вероятно, займет некоторое время, и было бы неплохо иметь надлежащую загрузку.

благодаря

источник

2015-09-21 Gustav

Возможно, вы сможете принудительно ускорить аппаратное ускорение, чтобы отключить выполнение JS, однако это может привести к повышению общей производительности, поскольку они будут иметь дополнительную мощность для рендеринга CSS и JS в фоновом режиме. http://davidwalsh.name/translate3d – mcclaskiem

Я вижу, что у вас есть префикс -webkit для Chrome, пытаетесь ли вы использовать префикс -moz и -ms для анимации, преобразования и ключевых кадров? –

@ JuanC.V. просто попробовал это в плунжерах, не имел никакого эффекта. они все еще замораживают – Gustav

Это ожидаемое поведение, что так как браузеры рендеринга в одном потоке. Chrome (браузер Webkit, если быть точным) отличается таким образом, поэтому их обычно называют «быстрыми» и «отзывчивыми». This article суммирует это.

Возможно, вы захотите делегировать задачи с интенсивным использованием ресурсов для веб-пользователя.

источник

2015-09-21 16:56:52 estus

Хорошо, изменив код. Кажется, анимация css в другом потоке работает для других браузеров, но пока нет – Gustav

Анимация зависает на FF в IE, но не на Chrome

ответ

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