Questions tagged [backdrop]
26 questions
5
votes
3 answers
2
votes
0 answers
Bug with backdrop-filter in firefox?
I'm having issues with backdrop-filter in firefox, but only when one of the parent elements has a border-radius and an overflow style on it. has anyone seen this before? any workarounds?
heres a codepen i made that shows the issue:…
drippydave16
- 29
- 1
1
vote
1 answer
Backdrop Filter Style Being Applied After Animation
To further understand React I have created a project using react-router-dom, styled-components and framer-motion.
My versions are like so.
package-json:
....
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
…
johnvenkiah
- 23
- 1
- 3
1
vote
0 answers
CSS: Backdrop Filter Slow on Android Chrome
I have coded a website in Next.js.
I decided to have some text boxes in front of the background with backdrop-filter enabled in order to achieve the "glass like" effect.
Particularly I have added these lines in css
.textbox {
background: rgba(…
Manos Pan
- 13
- 4
1
vote
0 answers
backdrop-filter blur stops working as soon as border-radius is applied to the DIV
Strangely, it started happening since Chrome94 and only on my Android phone (while everywhere else it still works fine like in my Android tablet).
When border-radius: 30px; is removed from the class that has backdrop-filter: blur(8px); in it, the…
HolyResistance
- 594
- 1
- 8
- 26
1
vote
1 answer
Javascript how to darken modal backdrop
I'm having trouble darkening the background when I open the modal. I found a ton of info on how to do this with bootstrap, but I am looking for a way to do it using javascript. I currently have the modal opening and closing when I want it to, so I…
Victor
- 329
- 4
- 17
1
vote
0 answers
flutter how to make an animation occur in lockstep with scrolling?
First of all I'm using flutter Backdrop but this question is about animation, not specifically backdrop.
See how when I scroll up just a little the top hides all of it right away? it jumps up and down upon scrolling. Watch this:
So What I'd rather…
MetaStack
- 3,266
- 4
- 30
- 67
1
vote
1 answer
Flutter reverse box shadow (from inside to outside)
So I have a boxShadow inside a Container, inside the frontLayer of a BackdropScaffold:
BackdropScaffold(
headerHeight: 430,
backgroundColor: Theme.of(context).backgroundColor,
backLayerBackgroundColor:…
MetaStack
- 3,266
- 4
- 30
- 67
0
votes
0 answers
how to make ion-popover's event element, above it's ion-backdrop for coach guide?
I'm trying to make a coach guide in my ionic app, using ion-popover. I don't want the event element (the element that is being explained by the coach text) to be in the dark area (the backdrop), but I want a specific styled backdrop on other…
AmirAli Saghaei
- 673
- 4
- 12
0
votes
0 answers
-webkit-backdrop-filter: url() doesn't work under Mac and IOS
I was trying to use CSS with backdrop-filters:
-webkit-backdrop-filter: url(#filter-58605);
backdrop-filter: url(#filter-58605);
And I can't figure out why they do not work on Mac Safari, IOS Safari/Chrome. While works great on Windows…
Arnobi
- 1
- 2
0
votes
0 answers
Backdrop-filter in header (to blur) overrides the Backdrop-filter in .dropdown-menu
My goal is to insert a blurry header background and a blurry dropdown-menu. Basically I'm trying to put a Backdrop-filter: blur(15px); to my .dropdown-menu but there's already a Backdrop-filter: blur(5px); inside the header. I believe it's…
Jado Bado
- 35
- 4
0
votes
1 answer
How to display the backdrop blur filter over radial-gradient pattern background in Tailwind?
I'm experimenting with a fiber carbon pattern using Tailwind CSS and I'm wondering why the backdrop blur filter isn't considering the radial-gradient pattern that the parent
has as its background (the dots, it just sees the background color of…
Void
- 67
- 7
0
votes
0 answers
Position fixed is not working with Backdrop-filter
I am tring to make a glass effect in navbar of my website. Here is the code:
HTML:
Ayush Kumar Bhadani
- 57
- 1
- 5
0
votes
1 answer
ground filter blur transition issue
Pressing the button blurs the background, but while transitioning, the edges of the div do not transition well. This problem exists in all browsers except firefox how can i fix it?
var btn = document.querySelector('button');
var div =…
manekko
- 5
- 5
0
votes
0 answers
Why text getting blur in a card on scroll
In snippet it is showing okay. But on scroll why the text on the card on the scroll becoming blurry? Is the problem is with the background or text itself.
.text .story-description {
width: 321px;
border-radius: 20px;
background:…
sohaib
- 574
- 5
- 16