Safari scroll bouncing causes white space to appear

[matheusgrieger]

When scrolling too fast or too much to the top of the page in desktop Safari, it shows an extra white space as is expected, but that locks the header out of place, as can be seen in the image below (notice the highlighted element is actually below the highlight).

Does anyone knows a way to fix this? Seems related to #89.

Edit: just saw that #90 aimed to fix this but it still happens to me on 3.1.0

[LiteSoul]

The same is happening to me on Safari. Using the latest react-headroom release 3.1.0 as well as 2.2.8.
I don't know why #90 no longer fixes it.

[cheezywhiz]

Just started seeing this behavior after upgrading to Big Sur/Safari 14. Weird thing is that the mouse still responds as if the header is in the right place.

I'm using <Headroom disable={isSafari && !isMobile}> until there's a fix.

[tannerbaum]

We also have been experiencing this for a few months now. Observed that is wasn't an issue in Safari 13, only in 14.

[matheusgrieger]

I'm starting to think that it's a Safari glitch, not related to the library itself.

[meaghanbass]

@cheezywhiz Can you share how you got isSafari and isMobile?

[cheezywhiz]

@cheezywhiz Can you share how you got isSafari and isMobile?

@meaghanbass I'm using https://www.npmjs.com/package/react-device-detect for that

[smeriwether]

I was seeing the same issue but was able to get this working by passing in position: fixed to the style prop. My component now looks like this:

<Headroom style={{ zIndex: 100, position: "fixed" }}>
...
</Headroom>

[cheezywhiz]

@smeriwether amazing! confirming that this works. thanks!!

[opolo]

Struck by the same problem in production. Setting position fixed solves it, but ruins all the "animations" on the header, which kinda moots the point of using headroom for having a visually pleasing behaving header.

Have anyone found any other fixes to this?

[endymion1818]

Is this still happening with v3.1.1?

[cheezywhiz]

seems to work fine now with 3.1.1

[matheusgrieger]

Yes, this is solved now. Thanks guys!

[chaddjohnson]

This is still a problem with react-headroom 3.2.0 in Safari.

[endymion1818]

Hello @chaddjohnson please could you let me know what version of Safari you're on