Recently i started to test the new responsive engine. And until now i ask myself why i dont started before, it is great!!!
But, maybe i’m doing something wrong or this is a bug. Well, i upgraded a page to test this new engine, and i’m having some issues with the hovered condition like you can see.
In the fisrt image, i’m using the old version of my page, where on a popup i have a RG that shows me some data. Using a custom state, I can set each row to edit data, cancel them or save the changes. Well, everything works fine here, the icons, one by one, change their colors when its is hovered.
But in the second image, you can see that this condition permain even if the icon is not hovered anymore, just because i move the cursor a bit more fast.
I had kept the same porportions and the conditional is simple, is just “when this icon is hovered” the color changes.
If you send me a link to a test page, I’d be happy to look into what’s happening exactly.
From what I see in those screenshots, I would say that it could be that a CSS transition property has been added to these icons, which makes their color change on hover last longer.
Or else it could be that the component is being re-rendered when you hover on a icon, and by moving your cursor, you’re triggering a bunch of rerenders.
I created a simplificated version of page (in the current project its is a popup), in this example page is just a normal group with less elements, and the problem continues.
Interesting. It turns out that my second assumption was correct. When you hover an icon, it re-renders the SVG icon to change its color. If you hover a bunch of them in quick succession, you will trigger a bunch of re-renderings. The lag you see if the lag of your browser processing them all.
That’s an unorthodox way to change the color of an icon. You can typically do that with CSS only and in that case, the execution would be so quick that you wouldn’t see any perceivable lag, no matter how fast your cursor would move across these icons.
Today i tried inserting CSS to improve this hover effect and remove the lag. Worked perfectly!
So, I decided to delete the CSS to see the difference from the previous one and, to my surprise, it was working correctly too. I don’t know what happened since the creation of this topic until now, if any changes were made by Bubble. Anyway, it’s working properly without the need to use CSS.
