Forum Academy Marketplace Showcase Pricing Features

[New Feature] Adjust an entire element’s opacity

What issue are you referring to?

Popus randomly appearing or not appearing

Do you have a repro case or screen recording? I’ll take a look asap

Microsoft​ Edge - Halley and 20 more pages - Personal - Microsoft​ Edge - 17 March 2023 (loom.com)

The Bug report page indeed has a bug, because I get a popup saying there was a problem, but the reports are anyway being generated. The last (of many I unknowingly created) is #35635

Hmm very suspicious behavior indeed. Will chat with the team about it, in the team time, do you see any console errors when the popups don’t load? (beautiful app btw!)

Have you seen this issue repro on chrome or safari?

I have seen it in Chrome. Haven’t tried in Safari. Will check and let you know

1 Like

Is happening as well in Safari

good to know, we can rule out browser issues

I think that it might has to do with some css settings in this PopUp (it had a z index). Perhaps something changed in a new release and this making some noise. After removing that, it seems to be working fine. Thanks for the support!

Ah gotcha, thanks for closing the loop!

Question!

Does setting the opacity field just set the CSS opacity from 0 to 1? If that’s the case, and we aren’t touching “display/visbility” that means we can apply transitions (i.e animate perceived “visibility”) and it also means that you can improve performance by playing around with conditions and opacity rather than visibility, isn’t that correct?

3 Likes

That’s a good question but I’ve not played with it @jonah.deleseleuc! You should be able to inspect this in the browser though, no?

1 Like

The following should be taken with a grain of salt. I have a fair amount of experience with CSS. I’m by no means a CSS expert though. Nevertheless, I’ll site my sources.

Okay first things first: I made a demo where you can see for yourself here

The Obviously Cool:

You can transition perceived visibility using opacity. What that means is that you can make something “fade” in or out nicely. It feels less “jank” when you toggle opacity. Even with just a few elements on a page, it looks a lot more polished

Discussion: Performance

From what I’ve read, animating the opacity property on an element has the benefit of being processed using the system’s GPU

the node being animated (using opacity and some other properties) can be moved off the main thread and onto the GPU … When an element is promoted as a layer, also known as composited, animating transform properties is done in the GPU, resulting in improved performance, especially on mobile.
mdn web docs

If this is true for the case where the opacity is being changed without it being “transitioned” or “animated” than this would indeed speed things up (especially if we’re talking about changing the visibility of dozens or hundreds of elements at once)

And according to this guide on how to speed up CSS performance the opacity and transform properties do not cause a “paint” or “layout”. That means that the browser does not need to redraw the page, ergo, better performance (especially at scale)

I’m hoping someone who knows a lot more than me on how the CSS engine works can chime in here.

But from what I gather & my own experience, changing the opacity property is a lot faster & smoother than visiblity/display

2 Likes

One more thing that could be nice is the ability to set the opacity of an element at runtime, i.e. When [My_Opacity_calculation > 0]
- Opacity value = {calculation of any kind rending a number between 0 and 100}

@nickc is this something you plan to fix?

Would you expect to see the child elements if the parent group’s opacity is 0?

yes, I would be very handy if i can see the border of the child elements when i select them in the elements tree. Now you can select an child element but no border is highlighted at the canvas so i don’t know where he is on the canvas and how his behavior is on the canvas based on his layout.