Bug with enable experimental web platform features

У нас есть блог blog.new.hr и он работает (успешно) на Node.js (но речь сейчас не о том ☺). Крутится все это на движке Ghost. Удобная современная платформа, но есть в ней и косячки, которые приходится исправлять.

В этот раз косячок нетривиальный и не сразу улавливаемый. Некоторые наши читатели под Chrome на Windows или Linux писали, что они видят блог размытым. И выглядело это все так:

backdrop-filter bug in Ghost blog platform

При этом у многих все работало ок, на той же Windows. Чтобы отловить баг ставилась виртуалка с нужными параметрами, брался физически компьютер с нужными параметрами — баг не повторялся. Пришлось покопаться и выяснилось что баг проявляется только при определенных условиях:

  • На сайте включена “Подписка”
  • У вас Linux или Windows
  • У вас браузер Chrome
  • В браузере включены экспериментальные фичи

Вот сам факт того что есть связь между опцией “Подписка на блог” и проблемами в браузере уже взрывает мозг.

Опция Подписки в блоговом движке Ghost

И вот когда эта опция была включена, а у вас Windows/Linux, браузер Chrome и в вашем браузере по какой-то причине включена опция “Включить экспериментальные фичи веб-платформ”, то тут баг и проявлялся.

Эти фичи по дефолту отключены и если они включены, то вы или кто-то включил их у вас. И если они включены, то вы должны понимать, что эти фичи экспериментальные и они могут привести к проблемам. Включить или выключить фичу можно через страницу настроек:

chrome://flags/#enable-experimental-web-platform-features

chrome://flags/#enable-experimental-web-platform-features

Эту фичу настоятельно рекомендуется отключить (если только вы явно понимаете зачем она вам нужна). Если вы веб-разработчик, тем более… Если это не браузер для экспериментов (а для экспериментов лучше иметь dev версии), то не нужно включать флаги, ибо потом будете удивляться тому, что у вас и у клиентов разное поведение сайта.

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

Если вы разработчик, то настоятельно рекомендуется быть аккуратнее с необычными фичами и тестировать их во всех браузерах. Вроде бы банальщина, но те, кто писал тему Casper для движка Ghost, не следовали этому правилу и вставили в CSS свойство backdrop-filter.

Так вот, в Chrome эта фича работает только если включен вышеупомянутый флаг. И в реализации этой фичи в браузере есть баг, который и проявлялся таким вот необычным способом, когда браузер пытался обработать свойство backdrop-filter.

А вообще зачем этот backdrop-filter ?

Ну вообще фича интересная. Свойство backdrop-filter определено в спецификации Filter Effect Level 2.

https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty

Оно позволяет применять фильтры к подложке элемента(backdrop), а не к его фону (background). Эти свойства доступны начиная с Safari 9. С этим свойством можно получить сложные эффекты, например такие как размытие подложки, как в iOS:

backdrop-filter in action in Safari

Всего-лишь небольшой кусочек кода:

.header {
background-color: rgba(255,255,255,.7);
-webkit-backdrop-filter: blur(4px)
backdrop-filter: blur(4px)
}

и у вас очень крутой эффект. Demo on JSBin.

Доступность:

  • Эта фича доступна в Safari и iOS с префиксом -webkit-.
  • В Chrome и Opera только при включенном флаге ( о чем уже говорили выше).
  • (!) В Edge так же доступно с префиксом -webkit- (не -ms).

backdrop-filter browsers support

Но! Но в Chrome даже с флагами эта фича очень бажная:

backdrop-filter in Chrome with enabled experimental web-platform features