Topic: Website header does not scroll smoothly (macOS, iOS 14 - safari 14)
A website header does not scroll smoothly, but jumps when scrolling down. Observed both on macOS Big Sur and iOS 14 with Safari.
*_Expected Behaviour:_*Smooth scrolling of the website header when scrolling down the page.
*_Observed Behaviour:_*The website header jumps/jitters when scrolling down. This is most noticeable when having scrolled down a bit, then scrolling up to make the header re-appear, then scrolling down again.
Can be observed on an iPhone with Safari 14 with the Sticky-Header demo page as well: https://ng-demo.mdbootstrap.com/navigation/sticky-header
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 10.1.1
- Device: Apple MacBook, iPhone
- Browser: Safari 14.0.1, 14.0
- OS: macOS (Big Sur), iOS 14
- Provided sample code: No
- Provided link: Yes
Arkadiusz Idzikowski staff commented 4 years ago
Thank you, we will check that. Did you also encounter a problem mentioned in this thread?
https://mdbootstrap.com/support/angular/mdbstickyheader-disappearing-on-ios-safari/
jespenhain pro premium commented 4 years ago
Thanks for the reply, the way raichshlv described it, this seems to be the same issue yes.
The nav bar does disappear when I scroll down, and only comes up again during scrolling up. It does not stay visible when scrolled all the way to the top. Once I stop scrolling, the nav bar disappears.