よく見るメニューですが、safariだとノイズが発生します。chromeでもよく見るとノイズが発生しています。transitionとGPUの問題だと思います。

FramerではStackを重ねることで解決出来ました。メニューやアイコンをラップし、背景色(今回は白)を指定したStack(contents)にもう一枚Stack(wrapper)を重ねます。

contentsには"Radius"を指定せず、wrapperに"Radius"を指定します。以上のことで今回のノイズは消すことが出来ました。

This is a commonly seen menu, but it causes visual noise in Safari. If you look closely, the noise also appears in Chrome. I believe it's an issue related to transitions and GPU rendering.

In Framer, I was able to resolve the issue by layering Stacks. I wrapped the menu and icons inside a Stack (referred to here as “contents”) with a white background, and then placed another Stack (referred to as “wrapper”) on top of it.

The “contents” Stack has no Radius applied, while the “wrapper” Stack does. This setup effectively eliminated the visual noise.