Website header does not scroll smoothly (macOS, iOS 14 - saf


Topic: Website header does not scroll smoothly (macOS, iOS 14 - safari 14)

jespenhain pro premium asked 4 years ago

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


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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Open

Specification of the issue
  • 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