Hamburger doesn't work properly Safari on mac and on iOS

[luluhoc]

So in chrome it works flawlessly but on Safari, it is buggy and when clicked it makes half the items disappear and later whole hamburger is not visible.

[luukdv]

I just checked https://hamburger-react.netlify.app on different versions of Safari, but I can't find any issues. Can you give some more explanation on how to reproduce your issue?

[luluhoc]

so when the backdrop filter is applied in safari to the background of appBar the burger doesn't work properly. I'm using app bar component from material-ui -webkit-backdrop-filter: saturate(180%) blur(20px); `

[luluhoc]

https://user-images.githubusercontent.com/22813220/121820024-bd680580-cc90-11eb-8f3b-0d3a489cab04.mov

The first one is on chrome and the second one is on safari

[luukdv]

Can you share a link to something like Codepen / Codesandbox with a minimal reproducible example?

[luluhoc]

Can you share a link to something like Codepen / Codesandbox with a minimal reproducible example?

https://codesandbox.io/s/blissful-northcutt-z3lw5?file=/src/App.js

[luluhoc]

Can you share a link to something like Codepen / Codesandbox with a minimal reproducible example?

were you able to check it out?

[luukdv]

Thanks for the link, looks like an issue in Safari with -webkit-backdrop-filter unfortunately. This also seems to happen when I replace the hamburger with a simple div that does a transform. Just wanted to emphasize as well that hamburger-react doesn't do anything "special" graphically, it's just a few divs with transition + transform.

You can circumvent the Safari issue by forcing it to create a separate layer:

<div style={{ willChange: 'transform' }}>
  <Hamburger />
</div>

[luukdv]

@luluhoc I’m closing this one, let me know if you have any other questions!