Ошибка Safari для iOS в режиме «mix-blend-mode» (особенно на iPad pro 10.5) - PullRequest
Новая
       39

Ошибка Safari для iOS в режиме «mix-blend-mode» (особенно на iPad pro 10.5)

0 голосов
/ 23 марта 2019

Я сталкиваюсь со странной проблемой на своем iPad, где у меня есть svg с mix-blend-mode: screen, чтобы раскрасить текст следующим образом:

CSS: 

img {
  top: 0;
  right: 0;
  bottom: 0;
  width: 50vw;
  height: 100vh;
  position: fixed;
  mix-blend-mode: screen;
  z-index: 100;
}

#backing {
  background: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

HTML: 

  <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
  <div id="backing"></div>
  <p>...content...</p>

См. JSBIN здесь: https://jsbin.com/kunofal

При загрузке все выглядит хорошо, но затем при прокрутке, как только верхний хром уменьшается, изображение становится сплошным: https://imgur.com/a/I62FrFX

Как ни странно, это также происходит, только если открыто более одной вкладки.Это не кажется проблематичным на настольном компьютере или телефоне, только на моем 10,5-дюймовом iPad Pro на 12.1.4 (16D57) и только в портретном режиме (как ни странно, он работает в альбомной ориентации).

I 'мы пытались добавить transform: translateZ(0); безрезультатно в соответствии с некоторыми рекомендациями о других ошибках в режиме смешивания.

Это ошибка или я что-то не так делаю?

...