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

[staniel359]

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.

Actual result

Testcase

See Steps to reproduce

Screenshot (if possible)

See above.

Version

2.9.3

[lubber-de]

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 😉
https://jsfiddle.net/lubber/o0cbxv7a/11/

[staniel359]

@lubber-de When I add

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

it works in Firefox:

but doesn't work in Chrome:

[staniel359]

@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]

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]

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

[xyloflake]

@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]

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

[lubber-de]

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