filter vs backdrop-filter

Differences, and why filter is not working in my case here:
.backdrop {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 20;
filter: blur(4px);
background-color: rgba(0, 0, 0, 0.5);
}
.backdrop {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 20;
filter: blur(4px);
background-color: rgba(0, 0, 0, 0.5);
}
18 Replies
13eck
13eckβ€’2y ago
Please read #How To Ask Good Questions . Right now we don't know what you expect it to do so we can't answer why it's "not working". What is it currently doing? What do you expect that it should be doing? What's the HTML look like?
PerpetualWar
PerpetualWarβ€’2y ago
It is not applying filter. Like I haven;t added it at all. Html is <div class="backdrop"></div> All seems straightforward but it is not applying anything. backdrop-filter works though and I fail to realize why? I would prefer filter` as it has better browser support
<template>
<Portal to="modal" :order="portalOrder">
<div class="modal-wrapper">
<div v-if="open" class="backdrop"></div>
<Transition name="htl-drop">
<div v-if="open" class="modal">
<OutsideClickContainer
@outside-click="$emit('cancel-modal-action')"
active
>
<div
:class="
!customStyleExist ? 'modal-content' : 'modal-custom-width'
"
:style="calcCustomStyle"
>
<slot />
</div>
</OutsideClickContainer>
</div>
</Transition>
</div>
</Portal>
</template>
<template>
<Portal to="modal" :order="portalOrder">
<div class="modal-wrapper">
<div v-if="open" class="backdrop"></div>
<Transition name="htl-drop">
<div v-if="open" class="modal">
<OutsideClickContainer
@outside-click="$emit('cancel-modal-action')"
active
>
<div
:class="
!customStyleExist ? 'modal-content' : 'modal-custom-width'
"
:style="calcCustomStyle"
>
<slot />
</div>
</OutsideClickContainer>
</div>
</Transition>
</div>
</Portal>
</template>
this is component html
Kevin Powell
Kevin Powellβ€’2y ago
the filter that you put above should blur everything, including the content inside that element... backdrop-filter blurs what's behind the element
13eck
13eckβ€’2y ago
backdrop-filter has great browser support:
PerpetualWar
PerpetualWarβ€’2y ago
aha, so if I understand correctly, it seems I should be using backdrop-fiilter here?
13eck
13eckβ€’2y ago
The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.
–https://css-tricks.com/almanac/properties/b/backdrop-filter/ So depending on if you want the background or bg and foreground should determine which property you use
PerpetualWar
PerpetualWarβ€’2y ago
Agreed, but since this class is only used to 'create;' backdrop, I don't see why normal filter is not applying? or maybe it is, but since I only have transparent backgrouond color I cannot see it?
Kevin Powell
Kevin Powellβ€’2y ago
If you open my pen linked above (I just updated it), it won't blur what's behind it, only what's inside it the update makes it more obvioous so if you're only trying to use that to blur other content, it won't have an effect
PerpetualWar
PerpetualWarβ€’2y ago
aha, I think I get it its just wrong solution in my case then
13eck
13eckβ€’2y ago
It's things like that that make me wonder what CSS would look like if the CSSWG started over from scratch and completely re-did the spec think
PerpetualWar
PerpetualWarβ€’2y ago
ye, this codepen is really helpful to see in detail, thanks @Kevin and also @cvanilla13eck
13eck
13eckβ€’2y ago
πŸ‘ Once you get Kevin and myself talking, it's hard to shut us up! lol
PerpetualWar
PerpetualWarβ€’2y ago
Thanks a lot, appreciated πŸ˜‰ Btw great content @Kevin , I follow you on a regular basis, always nice stuff on youtube chan πŸ˜‰
Kevin Powell
Kevin Powellβ€’2y ago
Thanks πŸ˜„ You might see something based on this on the channel in a few weeks πŸ˜‰
PerpetualWar
PerpetualWarβ€’2y ago
Word πŸ˜‰
PerpetualWar
PerpetualWarβ€’2y ago
I just proved to myself as well,,, I added text with color: white inside this div and it has blurred content, and behind its still not blurred
PerpetualWar
PerpetualWarβ€’2y ago
that kinda threw me off (not having any content in this div to see filter being applied) Im off...cheers guys πŸ˜‰
Want results from more Discord servers?
Add your server