Анимация Webkit оставляет на экране нежелательные пиксели

Следующий код помещает на экран белый квадратик. Если вы запустите это на iPad (вы можете отрегулировать пиксели, чтобы запускать его на iPhone тоже), когда вы прикоснетесь к коробке, он отскакивает от экрана и оставляет след белых пикселей по его нижнему краю.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-height, user-scalable=no, maximum-scale=1, minimum-scale=1" /> <title>Line Bug Demo</title> <style> body { background: black; } .panel { background: white; position: absolute; z-index: 2; width: 1000px; height: 500px; top: 34px; left: 12px; -webkit-border-radius: 20px; -webkit-transition: left 0.333s ease-in-out; } .panel.hide { left: -1000px; } </style> </head> <body> <div class="panel" onclick="this.setAttribute('class', 'panel hide')"></div> </body> </html> 

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

Вот обходные пути, которые я нашел до сих пор:

 .panel.hide { -webkit-border-radius: 0; } 

Ужасно и не очень практично для моего приложения, потому что я оживляю панель как внутри, так и снаружи, и я действительно хочу округлые углы, когда она на экране.

Другая:

 .panel { -webkit-transform: translateZ(0); } 

Это помещает панель в аппаратный конвейер, который правильно выполняет компоновку. Хотя это работает с этой простой демонстрацией, использование аппаратного конвейера в моем реальном веб-приложении приводит к ошибкам в памяти. (Из резкого, огромного, немедленного разнообразия.)

Любые другие идеи о том, как я могу избавиться от этой тропы?

Решение

 box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); 

Вы можете использовать цвет фона вашего ящика в качестве цвета box-shadow если вы чувствуете, что это слишком заметно.

В качестве альтернативы, в соответствии с этим ответом на аналогичную проблему в Chrome (спасибо Себастьяну в комментариях для подсказки), вы можете попробовать:

 outline: 1px solid transparent; 

Что происходит?

Я дал довольно длинное объяснение в другом месте, но вот короткая версия. По соображениям производительности WebKit только перепечатывает ту часть страницы, которая, по ее мнению, может измениться. Тем не менее, реализация iOS (pre-7) Safari для пограничных радиусов сглаживает несколько пикселей за пределы расчетных размеров окна. Поскольку WebKit не знает об этих пикселях, они не перерисовываются; вместо этого они остаются позади и накапливаются на каждом кадре анимации.

Обычное решение, как я предложил в моем другом ответе, состоит в том, чтобы заставить этот элемент потребовать аппаратное ускорение, чтобы он рисовался как отдельный слой. Однако слишком много мелких элементов или несколько больших будет приводить к тому, что много фрагментов будет загружено на GPU с очевидными последствиями для работы.

Использование box-shadow решает проблему более непосредственно: она расширяет размеры перерисовки окна, заставляя WebKit перерисовывать дополнительные пиксели. Известные последствия использования box-shadow в мобильных браузерах напрямую связаны с используемым радиусом размытия, поэтому одна пиксельная тень должна иметь малое значение.

Что я буду делать:

  • -webkit-backface-visibility: hidden
  • анимировать с -webkit-transform:translateX(left value here) // или translate-3d(x,y,z) , left должно быть отключено [*]

Обязательно проверьте, не влияет ли включение аппаратного ускорения на родителя .

Существуют также простые способы принудительного перерисовки – дайте мне знать, если вам нужна информация о них.

[*] полагаясь на 3d-преобразования, это взломать и следует использовать с осторожностью, и это компромисс между графическим процессором и памятью, в некоторых случаях это может вызвать проблемы с анимацией или памятью (think-mobile, заставляя ускорение GPU на больших площадях).

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

  • Ошибка теневого распространения в WebKit в iOS 7 на iPad Retina
  • HTML-разбивка на страницы
  • Способы улучшения производительности прокрутки UIWebView?
  • iOS: сбой WebKitLegacy
  • -webkit-transform Запрещает страницу с загрузки
  • Нуль Нуль Нуль Нуль Нуль Нуль Нуль Нульвиун Нуль Нуль Нуль Нуль Нуль Нуль Нуль Нужно
  • Отключить усиление в WKWebView
  • Невозможно создать / включить среду WebKit в проект iOS
  • Чтение трассировки стека iOS Webkit
  • Не удалось выполнить команду com.apple.WebKit.Networking: 113: Не удалось найти указанную службу
  • Как настроить пользовательские заголовки HTTP на запросы, сделанные WKWebView
  • Давайте будем гением компьютера.