Bug with enable experimental web platform features
У нас есть блог blog.new.hr и он работает (успешно) на Node.js (но речь сейчас не о том ☺). Крутится все это на движке Ghost. Удобная современная платформа, но есть в ней и косячки, которые приходится исправлять.
В этот раз косячок нетривиальный и не сразу улавливаемый. Некоторые наши читатели под Chrome на Windows или Linux писали, что они видят блог размытым. И выглядело это все так:
При этом у многих все работало ок, на той же Windows. Чтобы отловить баг ставилась виртуалка с нужными параметрами, брался физически компьютер с нужными параметрами — баг не повторялся. Пришлось покопаться и выяснилось что баг проявляется только при определенных условиях:
- На сайте включена “Подписка”
- У вас Linux или Windows
- У вас браузер Chrome
- В браузере включены экспериментальные фичи
Вот сам факт того что есть связь между опцией “Подписка на блог” и проблемами в браузере уже взрывает мозг.
И вот когда эта опция была включена, а у вас Windows/Linux, браузер Chrome и в вашем браузере по какой-то причине включена опция “Включить экспериментальные фичи веб-платформ”, то тут баг и проявлялся.
Эти фичи по дефолту отключены и если они включены, то вы или кто-то включил их у вас. И если они включены, то вы должны понимать, что эти фичи экспериментальные и они могут привести к проблемам. Включить или выключить фичу можно через страницу настроек:
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:
Всего-лишь небольшой кусочек кода:
.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).
Но! Но в Chrome даже с флагами эта фича очень бажная:
