[Website] Animation Overlap on Meshery.io

[liya-oz]

Current State of the Meshery.io site in the Safari browser

The animated icons section overlaps the fixed header when interacting with the animations. Specifically, if you scroll down slightly to a point where some labels or animations are partially hidden by the fixed header, the animation triggers on mouse movement and overlaps the header, causing a visual glitch.

VIDEO-2025-01-05-01-25-51.mov

Desired State of the Meshery.io site

The animated icons should remain confined to their container and should not overlap with the fixed header.

I observed this while using Safari Version 17.6 (17618.3.11.11.7, 17618) on macOS Monterey v12.7.6. I also double-checked with Google Chrome, and there were no issues—everything worked as expected.

[welcome]

Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the Newcomers' Guide and sure to join the community Slack.

[Murdock9803]

@vishalvivekm Can i work on this issue ?

[Chayan8837]

i am new to opensource , can i work on this ?

[augustmood]

Are u able to reproduce it? @liya-oz I’ve tested the issue on my side (macOS) using Firefox, Chrome, and Safari across different devices, but I was unable to reproduce the problem. Could you please provide more details about your environment, like browser and version, your operating system...

[liya-oz]

Are u able to reproduce it? @liya-oz I’ve tested the issue on my side (macOS) using Firefox, Chrome, and Safari across different devices, but I was unable to reproduce the problem. Could you please provide more details about your environment, like browser and version, your operating system...

Done!

[leecalcote]

@liya-oz, thank you for raising this issue! Assuming that you would like to fix it, I'm assigning it to you now...