Фон:
Я делаю 2D-анимацию HTML / CSS с использованием JQuery. Это поместит примерно 25 изображений одинакового размера друг на друга, перемещая некоторые по желанию. Элементы пользовательского интерфейса получают позицию в пикселях и намного меньше, чем полноразмерные изображения. Недавно я перешел от принудительного аппаратного ускорения формы backface-visibility: скрытого к воле-изменения свойств CSS. Вся анимация масштабируется с помощью div, в котором она содержится, и свойства преобразования css.
Проблема:
В частности, в Google Chrome композитинг начинает работать неправильно в некоторых случаях. сцены, в воспроизводимой, но, казалось бы, случайной манере. Изображения частично обрезаются, изображения помещаются за изображениями, на которые они должны быть сверху, и тому подобное. Прокрутка вверх и вниз заменяет некоторые неисправности другими, как и изменение свойств отображения некоторых элементов (происходит из-за взаимодействия с пользовательским интерфейсом).
Вопрос:
Что такоевызывая такое поведение, почему все остальные мои тестовые браузеры (Firefox, Opera, Internet Explorer, Edge) не затрагиваются, и как я могу избежать этого?
Мой текущий статус:
Из того, что я пробовал до сих пор и мое внутреннее чувство, это проблема, вызванная чрезмерным использованием аппаратного ускорения или свойством transform: scale css, или их сочетанием. В настоящее время я работаю над другими методами масштабирования, чтобы легче всего решить проблему, но я до сих пор не знаю, что все это вызывает. К сожалению, все мои элементы пользовательского интерфейса не являются аккуратным% от родительского.
То, что я пытался:
- Сначала я попытался установить z-index длявсе элементы вручную. К сожалению, это ничего не дало.
- Поскольку иногда прокрутка вверх / вниз или взаимодействие с пользовательским интерфейсом, казалось, решали проблемы, я попытался добавить метод, который заставлял бы браузер заново выполнять компоновку в определенных точках кода. Возможно, это только усугубило ситуацию, поскольку добавило много белого мерцания и не помогло решить проблему.
- Я попытался переключить библиотеки анимации с jquery на скорость, но это не помогло.
- Я удалил «взлом», который заставил вещи в аппаратное ускорение. Это устранило проблему с компоновкой, но возобновило прерывистую анимацию в chrome (только).
- Затем я попытался назначить аппаратное ускорение по необходимости, добавив и удалив класс css, содержащий «hack». Поведение было таким же, как в 4.
- Я пытался использовать will-change вместо взлома видимости на задней панели, но это просто вернуло поведение туда, где оно было до того, как я начал свои попытки исправить это.
- Я попытался уменьшить количество слоев при сохранении аппаратного ускорения. Я использовал jquerys ".hide ()" для элементов, анимирующих только один раз, когда заменил окончательное изображение единственным изображением. Это не решило проблему составного «mashup».
- Наконец, я отключил свойство масштаба преобразования css, которое исправило непредвиденное поведение, но крайне важно, чтобы я мог масштабировать свою анимацию для размера экрана.
Некоторый код:
Вот некоторый CSS-код контейнера анимации
.animationContainer {
position: relative;
width:2560px;
height:1440px;
/*transform: scale(0.55);*/
transform-origin: top left;
overflow: hidden;
display: inline-block;
}
И некоторый JavaScript, подробно описывающий анимацию, которую я использую для большинстваобъекты, из-за которых они «падают» в сцену
function fadein(el, direct)
{
var falldistance = 150;
$(el).show();
$(el).css("opacity", 0.0);
switch(direct) {
case 0:
$(el).css("top", "-="+falldistance);
$(el).animate(
{
top: "+="+falldistance,
opacity: 1.0
}, 1000);
break;
[...]
Я не знаю, насколько полезным будет больше кода, если вам потребуется больше, спросите. Веб-дизайн - это не та область, в которой я имею большой опыт, и у меня постепенно заканчиваются идеи. Любая помощь или предложения будут оценены.
Пример Visual:
Это пример одной из ошибок: 
Вот как это выглядит после прокрутки вниз и назад в браузере: 