Backdrop filter не работает ios

Продвинутые CSS фильтры

Перевод статьи advanced css filters, авторства Vincent De Oliveira, найденная мною в последнем дайджесте.

Я не смог коротко перевести на русский backdrop и background, сохранив смысловую разницу между ними, поэтому поясню сейчас:
backdrop — то, что находится за элементом, и может быть видно через него, обрезано по его рамке;
background — тоже фон, но является частью элемента, к нему и относится свойство background.

Вернемся в 2011 год, браузеры начали вводить CSS фильтры из спецификаций. В это время поддерживались в основном SVG фильтры, а Firefox был единственным браузером, который мог применить их к HTML контенту (в основном, ничего не изменилось).

CSS фильтры такие как blur(), contrast() или grayscale() — отличное дополнение к CSS, несмотря на то, что SVG может позволить сделать восхитительные вещи. Больше узнать о них вы можете на множестве ресурсов.

Сегодня я хочу пойти чуть дальше, показав новые возможности CSS.

backdrop-filter

В первую очередь — это backdrop-filter свойство, определенное в Filter Effect Level 2. Оно позволяет применять фильтры к фону(backdrop) элемента, а не к его фону(background).

Я был настроен скептически, но я начал играться в WebKit nightlies в феврале, и изменил свое мнение — это очень круто. Каждый согласится со мной, что подтверждается моим Vine (сервис, похожий на Сoub — прим. переводчика) постом, который собрал более 20 тысяч просмотров за 48 часов.

В июне, Apple анонсировала на WWDC, что эти свойства будут доступны в Safari 9. Это хорошая новость. Самое время проверить, (автор использует бету iOS 9 и Safari 9).

С этим свойством вы можете получить эфекты, которых добиться было тяжело. Самое банальное — размытие как в iOS:

Каждый элемент за header`ом размыт на 5px. Это так просто.

Живой пример на JSBin (только Safari 9).

В демо, я использовал для того, чтобы применить backdrop-filter вместе с небольшими корректировками (background-color и позиционирование), чтобы сохранить читаемость header`а в неподдерживаемых браузерах.

backdrop-filter может повысить читаемость текста, наложенного поверх изображения:

Живой пример на JSBin (только Safari 9).

Комбинируя несколько фильтров, вы можете сделать простые графические эффекты, близкие к тем, которые предлагает CSS blend-modes:

Живой пример на JSBin (только Safari 9).

Несколько вещей, которые надо знать:

• фон элемента, к которому применен backdrop-filter, должен быть полу-прозрачным. Если нет, то вы никогда не увидите эффект
• есть баг при комбинировании backdrop-filter с любым свойством, которое обрезает элемент (border-radius, mask, clip-path, etc). Это означает, что продвинутые эффекты пока невозможны
• backdrop-filter создает новый контекст наложения, как opacity
• backdrop-filter можно анимировать
• это свойство требует префикс: -webkit-backdrop-filter
• CanIUse

filter()

Иногда, надо наложить фильтр ни на элемент, ни на фон(backdrop). Вы просто хотите применить его к фону(background), но свойства background-filter нет. Вот тут может пригодиться функция filter(), не следует путать со свойство filter. Функция принимает два параметра: изображение и фильтр, возвращает новое изображение. Это изображение можно использовать с любым CSS свойством, поддерживающим изображения. Как то так:

В результате, теперь можно применять фильтры для изображений, перед использование в качестве фона. Вы можете подумать, что она — вариация background-filter (или background-opacity, background-blur), но она намного мощнее.

Живой пример на JSBin (только Safari 9).

Хорошая новость в том, что даже без упоминания Apple, она доступна в Safari 9.

Несколько вещей, которые надо знать:

• есть баг с background-size
• функцию можно анимировать
• функция требует префиксi: -webkit-filter()

Стоит отметить, что backdrop-filter и filter() можно легко анимировать с CSS transitions или анимацией, или с помощью JavaScript.

Я с нетерпением жду, когда в браузерах введут эти фичи. SVG тоже может это делать, но такие же крутые эфекты можно легко сделать с CSS. С прошлого года, много споров вокруг CSS были сфокусированы на архитектуре, методологии, инструментах. Хорошо помнить о том, что CSS так же и о графическом дизайне (вместе с SVG).

OK, сейчас поддержка минимальна, но это станет возможным на миллионах iPhone`ов и iPad`ов до конца года.

Источник

backdrop-filter

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

Чтобы увидеть работу свойства основной элемент или его фон должны быть хотя бы частично прозрачными.

Похожие эффекты можно видеть в интерфейсах продуктов Apple: IOS, OSX Yosemite и т.п. Без фильтра такой эффект можно получить разделив элемент на основной контент и фон, то есть на два тега, и применив filter к фоновому элементу. Теперь же сделать «матовое стекло» на фоне гораздо проще. Пример работы:

Синтаксис

В настоящий момент можно применить следующие функции:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() – для SVG фильтров

Можно использовать несколько функций одновременно

Пример разных значений свойства

На момент подготовки этого материала backdrop-filter работает кроссбраузерно – есть поддержка для 86% браузеров. Свойство не работает в Internet Explorer и в некоторых версиях мобильных браузеров. В Firefox и Opera свойством можно пользоваться, если подключить вручную. В Edge и Safari поддерживается -webkit-background-filter .

Источник

Backdrop filter doesn’t work the same on iOS and Android #16144

Comments

fralways commented Apr 2, 2018 •

Steps to Reproduce

I have a background image which fills whole screen and I want to blur only one part of the screen. Strange thing happens when I add Text widget, it seems that BackdropFilter then takes whole screen instead just part of it. Check the following code:

In this code I have two children of BackdropFilter widget — Container and Text. When I comment out Text and use Container as a child it works okay. If I comment out Container and use Text then BackdropFilter uses whole screen on my iPhone. Using the same code in Android simulator produces expected behavior — BackdropFilter only uses part of the screen.

Flutter Doctor

Paste the output of running flutter doctor -v here.

The text was updated successfully, but these errors were encountered:

jason-simmons commented May 1, 2018

This is due to inconsistent behavior in Skia between Android and iOS.

Flutter uses an SkPictureRecorder to record the operations used to paint widgets such as the text. When Flutter ends the recording, it expects the resulting SkPicture’s cullRect to represent the bounds affected by the operations.

Eventually the picture is assigned as a child to the BackdropFilterLayer, and the picture’s cullRect defines the bounds where the backdrop filter is applied.

This is working as expected for this example on Android.

On iOS, the cullRect returned after finishing the recording is same rectangle passed to SkPictureRecorder::beginRecording (Rect.largest) and doesn’t match the bounds of the text. So the BackdropFilter is applying to the entire drawing area.

Will need to work with the Skia team to find a fix.

Источник

How to create iOS Backdrop effect

CSS Backdrop filters create a fresh and modern design, but unfortunately they are only supported by Safari. Here is a list of the best techniques to get around this problem.

What is a backdrop filter ?

Backdrop filter is a CSS filter which allows to apply a filter (such as blur, hue, brightness…) to the backdrop of an element — instead on the element itself. Here is a demo with images :

This effect can be created easily with this simple CSS property :

Unfortunately, this cool property doesn’t have a very wide browser support. According to canIuse.com:

As you can see, this is currently only supported by Safari.

To solve this problem, and create this effect on other browsers, I looked for solutions on the wider net. During this process I found that there were plenty of clever solutions to overcome this problem. Here are the best results I found, classified according to usage and tools required.

1. Backdrop filter on a fixed body background:

The easiest way of creating a backdrop filter like effect is to apply it on a fixed full-height-width background image.

You can create already nice effects like these :

• add a fixed background to the body tag
• prepend an absolutely positioned element to the ‘backdrop div’ (usually a ::before pseudo element)
• get the ::before element to inherit the body’s background
• add any filter to the ::before element

Under these conditions, the ::before element will apply the specified filter applied to its background image, which is displayed only ‘under’ the backdrop div.

Here is an excellent tutorial :

How to do CSS only frosted glass effect?

Frosted glass effect has been kicking all over the internet for a quite few years now, Mac OS is famous for its frosted…

You can also have a look on this codePen:

Given these resources, you have to keep in mind that these codes will only work under these two conditions:

— having a fixed background

— applying this background to the body tag

2. Backdrop on any selected element:

Fixed background is great, especially for hero headers or log in pages. But you may want to use overlay on smaller surfaces, such as on a content images, or even on multiple elements (galleries, etc).

Here things become bit more tricky, because can’t use a fixed background defined by the size of the viewport. Fortunately, there are some Jquery plugins available which will do the job. Here are 2 I found:

translucent

Translucent plastic card theme.

vibrancy.js

Edit description

If you don’t want to use Jquery, things can become a bit trickier. However, let’s have a look at it anyway!

a. Backdrop on the side of an element (on top, bottom, etc):

The original idea is fully inspired from this tutorial:

Frosting Glass with CSS Filters | CSS-Tricks

While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the…

With this technique, you can get a result like this:

Here is my Pen for this example — I just modified the original code a bit to extend it for a more general use:

In a nutshell, the idea here is:

— to create a background element (here the unblurred photo), let’s call it element A

— to create un absolutely positioned element with same size than the background element (element B), and with overflow: hidden propriety

— append a ::before element to to element B, give to it the same background than element A and apply the selected filter (blur filter here)

— apply an Y translation to B to overlay A

— / here is the trick / apply a second Y translation to B’s ::before element for it to be exactly positioned on A. Since B’s overflow is hidden, only the part of the filtered background inside B will be visible, and, since the filtered background is positioned on A, it will visually adjust to A’s background.

On first photo, for the translation part, we did

On the second photo:

b. Backdrop of any shape — svg only solution

If you need to completely get rid of constraints on your overlay, then the most flexible solution might be to use svg. One of the strengths of svg is that it has a broad browser support, especially for filters.

Источник

backdrop-filter: opacity (), похоже, не работает

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

Эффект: У меня есть фоновое изображение (весь экран) я его закрасил тёмным сероватым цветом. У меня также есть круглый div размером 100 на 100 пикселей, следующий за указателем мыши. Моя цель — сделать этот круглый div своего рода «окном», которое могло бы видеть сквозь темно-серый цвет и таким образом получать удовольствие от фонового изображения при движении мыши.

1. стилизовал фоновое изображение как z-index: 1, height: 100vh и width: 100vw.
2. стилизовал серый цвет фона как z-index: 2, height: 100vh, width 100vw и background-color: gray;
3. стилизовал div, следующий за моим указателем, как z-index: 3, height: 100px, width: 100px, border-radius: 50% и backdrop-filter: opacity (0);

Конечно, я все упростил и могу сказать, что фоновый фильтр работает с другими параметрами, такими как размытие или оттенки серого . Но я не знаю, почему параметры непрозрачности вообще ничего не делают. Я читал, что backdrop-filter: opacity () потребует других настроек CSS, таких как mix-blend-mode. Но я пробовал довольно много, но безуспешно.

Я знаю, что сейчас думаю только о CSS, поэтому я открыт для других предложений с CSS или без него. Если вам нужна более подробная информация, не сомневайтесь. Я собираюсь сделать пример на codeSandBox и отредактировать свой пост, чтобы его было легче понять.

Источник