Hover interaction looks different on iOs and Windows

hey guys, really need your help with this one!
I have four panels covering the image when hovered. Each of the 4 blue panels is covering the image div 50% horizontally and vertically. So logically - it should be fully covered. This is the case on mac, but it’s acting out on Windows by leaving a small gap in between the panels (screenshots attached).

All suggestions are welcomed in case you have any ideas.


Here is my public share link: Webflow - Smart Toys Awards

If you take the wrapper out of the grid it works.
Took a while but I think I have the solution.
Mixing measurements does not in general work well.
You have FR on grid and % on the 4 absolute divs d-61-panel etc.
Change FR to % and it works.

If this solves your issue can you tick solutions and press the heart of love please.

Note, for those reading I offer consultancy services for pagespeed issues. PM me for details.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.