search

fomantic / Fomantic-UI

Fomantic-UI is the official community fork of Semantic-UI
https://fomantic-ui.com
MIT License
3.52k stars 329 forks source link

[Modal] Blur doesn't work in modal without background #3061

Open staniel359 opened 3 weeks ago

staniel359 commented 3 weeks ago

Bug Report

Blur doesn't work in modal without background. The element is just transparent like its parent.

But somehow it works in transparent segment. (See Expected result).

Steps to reproduce

  1. Create a modal with background: none
  2. Inside <div class="content"> place a child element with backdrop-filter: blur(0.5rem)

Expected result

To have a blur.

image

Actual result

image

Testcase

See Steps to reproduce

Screenshot (if possible)

See above.

Version

2.9.3

lubber-de commented 3 weeks ago

If you use the backdrop filter on the dropdown menu and also have the dropdown menu background set to "none", it seems like what you want to achieve. Otherwise please adjust the jsfiddle according to your needs. Much easier than guessing your codebase :wink: https://jsfiddle.net/lubber/o0cbxv7a/11/ image

staniel359 commented 3 weeks ago

@lubber-de When I add

.ui.modal, .content {
  background: none !important;
}

it works in Firefox:

image

but doesn't work in Chrome:

image

staniel359 commented 3 weeks ago

@lubber-de Also weird thing happens when I toggle will-change property In Electron (Chromium):

Screencast from 24-06-24 14:53:29.webm

xyloflake commented 3 weeks ago

This might be the first time I see something working in firefox, but not in chrome XD.

Maybe something deep down has the properties set for mozilla only props? Just suggesting, might be wrong since I haven't taken a look.

cc @gamersi

gamersi commented 3 weeks ago

Yeah that's possible. Another possibility is that Blink just screws up

xyloflake commented 3 weeks ago

@gamersi I have already checked blink since @staniel359 reported it, it does have a lot of weirdness around but it doesn't skip stuff, it should render fine. I couldn't even find any bugs in the memory maps.

Moreover the weirdness is because blink is very sensitive to performance. So it does use some very complicated methods to keep it performant.

Also checked the DOM tree mapper and it seems fine. I couldn't find any possible chances of missing an entire css property out.

I did suspect that something mght be wrong with blink in the discord server but after investigating, it doesn't look like it.

If this is a bug within blink, it has got to be an edge case bug. If I had to guess, the props are rendered fine (as we see the minor blur) but something is wrong with the DOM tree handler which determines relevant to which element the blur should be applied. It's probably messing up there.

All of this suspects bugs within chromium. Might be an internal problem in this repo. Just ruling out the possibilities.

Don't take this way too seriously guys, I haven't checked out any source code for fonmatic UI :)

xyloflake commented 3 weeks ago

@lubber-de can you add back type/bug? I think this clearly is a bug?

lubber-de commented 2 weeks ago

When you reset will-change for the page dimmer, at least the backdrop works for the modal itself in chrome. See https://jsfiddle.net/lubber/o0cbxv7a/27/ Chrome still bugs on nested backdrop-filter for the dropdown menu inside the modal. Well, the backdrop filter is somewhat applied, but blurs the body instead of the direct modal content parent and only inside the modal content area. Firefox does this correctly.

Yes, it's a bug, but a bug in chromium, not Fomantic. https://issues.chromium.org/issues/40835530