Странная ошибка "фильтра: оттенки серого" в Safari iOS? - PullRequest
Новая
       15

Странная ошибка "фильтра: оттенки серого" в Safari iOS?

0 голосов
/ 05 ноября 2019

Я использую filter:grayscale(1) на изображениях. Контейнер изображения также имеет псевдо :after, примененный с цветом фона, установленным на mix-blend-mode:screen. Кажется, все работает, кроме Safari iOS.

Вот CSS для изолированных изображений: 

.grid-item img {
    filter:grayscale(1);
    transition:filter 0.25s ease;
}

.grid-item:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
    z-index:1;
    mix-blend-mode: screen;
    transition:opacity 0.25s ease;
    pointer-events:none;
}

.grid-item.is-active:hover img {
    filter:grayscale(0);
}

Вы можете увидеть весь сайт здесь: http://www.tobiasgerhardsson.com/work/linazedig

И вот видео, показывающее это в прямом эфире: https://streamable.com/a6lxe

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

Я пытался удалить режим mix-blend-mode, так как думал, что это является причиной ошибки, но ошибка исчезает только при удалении filter:grayscale(1) из изображений. Я также использую плагин JS для создания flexbox masonry grid макета на рабочем столе. Но я также временно удалил сценарий, и ошибка остается.

Так что, в общем, это проблема с filter:grayscale, но я не уверен, вызвано ли это комбинациейдругих свойств CSS или нет. Кто-нибудь испытывал это раньше и знает, что может быть причиной? Или это просто ошибка, которую невозможно решить?

1 Ответ

0 голосов
/ 05 ноября 2019

Чтение этой темы , я обнаружил, что применение следующих свойств к элементу с filter устраняет ошибку: 

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
...