Проблема с рендерингом css в iPad webkit

Question

Использование свойства border-image css на сайте приводит к появлению странных артефактов рендеринга на iPad (при условии, что все устройства ios имеют одинаковую проблему).По сути, это добавляет маленькие строки, где изображение разрезается в соответствии с CSS.Смотрите изображение в качестве ссылки:

Выполнение определенных действий приведет к исчезновению линий, таким как увеличение или перемещение элемента div, к которому я его применил.Я предполагаю, что это ошибка рендеринга в мобильном сафари, но есть ли у кого-нибудь какие-либо идеи / предложения о том, как ее исправить?

Могу добавить, что это корректно отображается во всех браузерах рабочего стола, поддерживающих свойство:хром, firefox и т. д.

Answer 1

Я уверен, что если вы увеличите или уменьшите масштаб с помощью Safari в версии для настольного компьютера, вы увидите ту же проблему. Иногда вы увеличиваете доли пикселей, а веб-набор не знает, что делать с субпикселями.

Попробуйте добавить к своей голове:

<meta name="viewport" content="initial-scale=1">

Таким образом, представление по умолчанию будет хорошим. Вы также можете отключить масштабирование, но я бы не стал его рекомендовать, если только он не создан специально для iPad.

Answer 2

Это беспокоило нас уже довольно давно.

Мы обнаружили, что линии исчезли, когда мы использовали stretch вместо repeat или round в значении изображения границы: так, например:

-webkit-border-image: url(image.png) 50 stretch;

Вы можете проверить это самостоятельно, перейдя на http://border -image.com / на своем устройстве iOs ипереключение параметра растяжения.

(Поэкспериментируйте немного со значениями смещения там, потому что автор сайта удобно использовал изображение границы, которое уже имеет цвет фона, где на устройстве iOS вы могли бы получить прозрачные линии.)

Answer 3

Включите аппаратное ускорение на граничном изображении, чтобы устранить эту проблему:

-webkit-transform: translate3d(0, 0, 0)

Answer 4

Масштабирование изображения, выполняемое при масштабировании, похоже, принимает шум от следующих пикселей на изображении (возможно, проблема с округлением?).Добавление одной строки буфера 1px к частям изображения работало для меня.