Фоновый фильтр CSS не обновляется при перемещении содержимого - PullRequest
Новая
       125

Фоновый фильтр CSS не обновляется при перемещении содержимого

2 голосов
/ 11 марта 2019

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

enter image description here

Что не так? Протестировано это на Safari 12.0.3, macOS Mojave 10.14.3. 

.container {
  width: 100%;
  height: 150px;
  overflow-y: scroll;
}

.block {
  height: 50px;
  margin: 10px;
}

.block:nth-child(1) {
  margin-top: 30px;
  background-color: red;
}

.block:nth-child(2) {
  background-color: green;
}

.block:nth-child(3) {
  background-color: blue;
}

.glass {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  top: 0;
  width: 25%;
  border: 1px solid black;
  height: 100%;
}

.clear {
   left: 55%;
}

.frosted {
  left: 20%;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
<div id="app">
  <div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="glass clear"></div>
    <div class="glass frosted"></div>
  </div>
</div>

1 Ответ

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

Я заметил, что DID обновился для меня после того, как я сделал экран меньше и прокрутил страницу.Но не обновлялся при прокрутке примера (независимо от размера экрана)

Таким образом, похоже, что причиной проблемы является краска, а не реализация.Это также заставляет меня задуматься, могут ли возможности устройства быть частично ошибочными.Я использую 13 "2017 MBP, поэтому нет дискретного графического процессора.

Вы пытались форсировать ускорение графического процессора? Для этого добавьте это к элементу: 

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);

Safari по-прежнему глючит сtranslateZ(0), поэтому используйте вместо этого выше.

Редактировать: Выше, кажется, не решить проблему. Попробуйте добавить will-change ( документы ), так как этоподдерживается Safari. Не уверен, что фильтры являются допустимым объектом изменения, но я считаю, что можно использовать 'scroll-position'. Я должен отметить, что это ядерная опция, поэтому будьте осторожны .

...