Skip to content
This repository was archived by the owner on Jan 11, 2022. It is now read-only.
This repository was archived by the owner on Jan 11, 2022. It is now read-only.

Sticky Header Jumps on iOS #86

@StefanImhoff

Description

@StefanImhoff

Hi,

I use sticky.js to fix the header of a client site. When fixed, some elements are hidden. so the header shriks.
In the header is a searchbox.
So, now the issue:
When I click on a iPhone/Chrome in the non-sticky header-searchbox, the page scrolls to keep the searchbox in viewport, the header gets sticky and shrinks. then the keyboard is appears. For unknown reasons the complete viewport seems to be pushed upward, so the sticky header is scolling out of the viewport.
As I red, this theems to be an issue with iOS.
I found this solution:
https://stackoverflow.com/questions/14492613/ios-ipad-fixed-position-breaks-when-keyboard-is-opened

It works fine, if the header is sticky before. But with the shrinking header on intial view/clicking in searchbox, it does not work.

How can I fix this?

Best regards!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions