Problems with Safari on iPad regarding onBottom

[sir-marc]

We found that toggling the "headroom--bottom" class in Safari on the newest iPads does not work properly. After some investigation i found, that the calculation currentScrollY + this.getViewportHeight() >= this.getScrollerHeight() (https://github.com/WickyNilliams/headroom.js/blob/master/src/Headroom.js#L354) is never true. This may be caused by debouncing and therefore not getting the latest - and biggest - scroll position. Most of the time it only misses a few pixels (2-10pixels). I created a simple example to demonstrate it: Demo: https://1vpqx1w87.codesandbox.io/ Code: https://codesandbox.io/s/1vpqx1w87

Tested on iPad (iOS 12.1) and Simulated iPad (6th generation and iOS 12.1)

Please let me know, if we can help you in any way.

[liquidvisual]

This issue renders the library unusable for a lot of people. Any chance of a hotfix, @WickyNilliams?

[hacknug]

Same thing on an iPhone XS on the latest iOS 12.2 beta.

[acahir]

Just tested on iPad 12.1.1 and while the bounce seems to mess up the timing, once the window "settles" at the bottom, the menu does move off the screen.

Is it just the delay that's the problem?

[hacknug]

The issue is that it seems it does not always call the onBottom and onNotBottom methods for some reason. Here's a link to a site where I'm experiencing the issue and a couple screenshots showing how it looks when it works and when it doesn't:

Works

Works not

[acahir]

@hacknug I'm not sure that this is the same problem that the op started this thread with.

The #article-header which headroom is targeted at is never hiding, in any browser, desktop or tablet for me.

[hacknug]

@acahir it should not hide but move to the top to fill the empty space left by #header (which is a headroom instance) when is unpinned. Also note this only happens in screens smaller than 768px wide.

[WickyNilliams]

I don't have an iOS device, so I am not able to debug this.

• Is this specific to iPad, or all iOS devices?
• Is this issue present on older versions of iOS?
• Is this issue present on older versions of headroom?
• Could this be related to the address bar hiding and showing?

[CharlesKumar]

I don't have an iOS device, so I am not able to debug this.

* Is this specific to iPad, or all iOS devices?

* Is this issue present on older versions of iOS?

* Is this issue present on older versions of headroom?

* Could this be related to the address bar hiding and showing?

There are many issues related to ios, consider this suggestion.

This might help all the headroom.js users

[WickyNilliams]

What are these "many" issues?

[CharlesKumar]

https://github.com/WickyNilliams/headroom.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+ios

many may be a 'overkill' ed word

[zhaoyejuan]

Is anyone resolved it ?

[moritzlang]

I fixed this issue by setting a very small tolerance in the options object:

{
    tolerance: 1
}

Tested on Safari on an iPhone 11 (iOS 14.3) and a simulated iPad 6th (iOS 11).