Анимация 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 будет правильным местом для отметки свойств, которые можно было бы оптимизировать заранее.

  • Удаленный console.log () на устройствах iOS
  • iOS: сбой WebKitLegacy
  • Как я могу получить файл с помощью WKWebView?
  • как заставить текстовый файл с настраиваемым расширением открываться в myApp, а не отображаться как текст в Safari
  • iOS Webkit игнорирует медиа-запросы
  • Переход CSS во время touchmove на устройствах iOS 7 не запускается
  • Нажатие WKWebView на UINavigationController вызывает ui отставание
  • UIWebView и локальное хранилище
  • Улучшение скорости CSS3 на iPad
  • Прозрачный SVG в iOS WebKit
  • Как прокрутить палец прокрутки прокручиваемого div с помощью "webkit-overflow-scrolling: touch"
  • Interesting Posts

    Изменение размера UIImage при выборе из UIImagePickerController

    Передача данных через ViewControllers – Сделать страницу настроек

    Замедляет симулятор сетчатки IPad 6.0

    Профиль SPP bluetooth iOS

    Принудительное касание UICollectionView внутри UITableViewCell

    Почему UIView не остается в центре, пока он вращается?

    Гарантирует ли IBOutletCollection правильный порядок?

    UIView – Как получать уведомления при загрузке представления?

    Недопустимый адрес электронной почты MFMailComposeViewController?

    Игровая площадка Xcode 6 с использованием Parse framework?

    Получить имя класса UIViewController в swift

    Как правильно настроить подфайл, который имеет как целевой объект инфраструктуры, так и целевую программу, использующую эту структуру

    Swift: использование «self» в вызове метода до того, как super.init инициализирует ошибку самокомпилирования

    Как занести исходные данные в Core Data + iCloud?

    обнаружение пользовательского касания на UIScrollView

    Давайте будем гением компьютера.