Анимация 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); } 

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

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

2 Solutions collect form web for “Анимация Webkit оставляет на экране нежелательные пиксели”

Решение

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

  • Обнаружение воспроизведения видео в компоненте WKWebView
  • Как диагностировать сбои, которые, как представляется, являются внутренними для WebCore (Thread 2, SIGSEGV)
  • HTML-разбивка на страницы
  • событие touchMove на мобильном сафари - приводит к перетаскиванию всей страницы
  • Как заставить «яблоко-мобильный-веб-приложение» не потерять сессию?
  • com.apple.WebKit.WebContent drop 113 error: Не удалось найти указанную службу
  • WKWebView заставляет мой контроллер просмотра протекать
  • Полосы прокрутки WKWebView
  • Как прокрутить палец прокрутки прокручиваемого div с помощью "webkit-overflow-scrolling: touch"
  • Ошибка прокрутки Webkit
  • Как запретить WKWebView неоднократно запрашивать разрешение на доступ к местоположению?
  • Interesting Posts

    Об ATS SSL в версии iOS 9

    iOS: включить отправителя в декларацию IBAction?

    Получить выбранную строку UIDatePicker во время вращения

    API Dropbox Core и Sync вместе в приложении iOS

    Доступна подписка на App Store с бесплатной пробной версией?

    Уведомление Apple Push не работает на общем сервере

    CoreData – Как использовать validateForDelete: чтобы определить, должен ли удаляться управляемый объект

    Предотвращение появления сторонних расширений в списке приложений Open In

    «Как сделать игру на основе плитки с помощью Cocos2D 2.X» Сделать этот учебник с помощью cocos2d V3

    Избавление от тени 1px на UINavigationBar с пользовательским фоновым изображением

    instantiateViewControllerWithIdentifier и вид свободной формы

    Как установить версии iOS в моем приложении?

    Swift: фатальная ошибка: неожиданно найден nil и EXC_BAD_INSTRUCTION

    Получение амплитуды текущего тонального сигнала с использованием основного звука

    Обновление времени системы iOS вызывает неудобство NSTimer / NSDate

    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.