Modal Opacity flickering

[Beblebroks (Nicolas)]

Hi,

I am experiencing a fliggering when using the opacity slider in the modal component. I think I also have seen that in your video @dan. So I am sure you guys know about that, but we have it documented now

I would say the problem is the tailwind class, as you can see in the video.

While in the documentation for the colors they reference this:
<div class="bg-pink-500/[71.37%]"><!-- ... --></div>

For custom opacity that is not set together with a color they state this:
<button class="opacity-[.67] ...">

Seems to me a inconsitency. But yeah is easier to complain then solving.

Nevertheless when looking at the code that it genereted in Elements we have that:
<div class="fixed inset-0 bg-black/25 bg-surface-950/[34%] [34%] backdrop-blur-[5px] pointer-events-none" x-transition.opacity="" x-dialog:overlay=""></div>

Where I would see an issue with the standalone [34%] behind the color. But yeah just an observation.

[Beblebroks (Nicolas)]

Also something else. When no color is selected the bg-black is still there and the bg--400 as well

[ben]

@Beblebroks

I am experiencing a fliggering when using the opacity slider in the modal component.

I’ve also seen this, we need to take a closer look as to why this is happening!

@Beblebroks

While in the documentation for the colors they reference this:
<div class="bg-pink-500/[71.37%]"><!-- ... --></div>

For custom opacity that is not set together with a color they state this:
<button class="opacity-[.67] ...">

In this instance you can use a percentage value for the background colour opacity. Both syntaxes are actually valid here.

I do think we might want to be more consistent and use the decimal notation everywhere, and ensure the values are rounded to the closest whole number, so we’d be doing bg-pink-500/[0.71] in the above example.

@Beblebroks

Where I would see an issue with the standalone [34%] behind the color.

That shouldn’t be in the exported HTML, but it won’t cause an issue as there won’t be any CSS generate for an “unknown” or “invalid” tailwind class.

[ben]

@Beblebroks

When no color is selected the bg-black is still there and the bg--400 as well

Thanks! I’ll check this one as well

[Beblebroks (Nicolas)]

Hi @ben,

This won’t work bg-pink-500/[0.71] only bg-pink-500/[71%] is valid. That’s why I meant inconsistent. Tested that in the browser. The first one just removed the color.

Cheers

[ben]

We’ve found the issue and will get a fix in ASAP.

This actually has nothing to do with the CSS, it’s an issue with an @portal call.

Also, I know this is pedantic, but just for anyone reading: both bg-pink-500/[0.71] and bg-pink-500/[71%] are in fact valid tailwind classes. You can do either, as demonstrated here: Tailwind Play

[Bill]

Actually, you should be building for tailwind 4.1 now - and to be uniform, it should be in format bg-pink-500/71 You get richer colors as a bonus. And fyi - *-opacity-* has been removed.

[ben]

@Bill

Actually, you should be building for tailwind 4.1 now

Elements isn’t building tailwind 4.x at the moment. We do have plans for this though.

@Bill

fyi - -opacity- has been removed.

I’m fully up to date on the v4 changes and have already made plans for how to handle most of (if not all) of the changes.

[Beblebroks (Nicolas)]

Hi @ben,

thanks for testing it again. No idea why that did not work on my side when I tested it. And glad you found the issue.

[Beblebroks (Nicolas)]

Hi @ben,

saw the light box the first time. Is gorgeous. But same problem and not only on the opacity but also on the blur.

[dan (Dan C.)]

@Beblebroks

saw the light box the first time. Is gorgeous. But same problem and not only on the opacity but also on the blur.

Good news, we’ve located the issue and it’s due to be fixed in the next build (or two)