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