URL: https://nailartverse.com
Browser / Version: Safari 18
Operating System: iOS18
Tested Another Browser: Yes Chrome
Problem type: Something else
Description: ugly visual effect during opacity transition of an element with backdrop-filter: blur
Steps to Reproduce:
The design includes overlapping elements, a glassmorphism style semi-transparent block with "backdrop-filter: blur" CSS property and text underneath it. During the animation opacity transition (click the hamburger button to toggle) there is an ugly black mass for a few moments instead of the blur. This only occurs in the mobile Safari (iPhone), not in desktop Safari or any other browsers on Mac or Android device.
View the screenshot
Browser Configuration
From webcompat.com with ❤️
URL: https://nailartverse.com
Browser / Version: Safari 18
Operating System: iOS18
Tested Another Browser: Yes Chrome
Problem type: Something else
Description: ugly visual effect during opacity transition of an element with backdrop-filter: blur
Steps to Reproduce:
The design includes overlapping elements, a glassmorphism style semi-transparent block with "backdrop-filter: blur" CSS property and text underneath it. During the animation opacity transition (click the hamburger button to toggle) there is an ugly black mass for a few moments instead of the blur. This only occurs in the mobile Safari (iPhone), not in desktop Safari or any other browsers on Mac or Android device.
View the screenshot
Browser Configuration
From webcompat.com with ❤️