Keyboard opening on ios adds overflow:visible to the content, destroying headers with alpha


When the keyboard opens on ios the is resized and its overflow set to visible

I assume its there to show the content like its “there” when the keyboard hides with an animation

Unfortunately my header has an opacity of 0.9 to show the background images pattern

Any Idea how i can use overflow:visible and still hide the overflown content from the header?

I think one way would be a fake element under the header where the z index is higher than the content and which has exactly the higher part of the image

Any smarter solution to that?


Don’t use overflow-scroll, and disable scrolling with