Keeping header on the top in safari of iPhone when I write something

I have a web page at
The page have header on the top and a textArea on the body.
There are 3 word in the textArea, i.e, top, middle, and bottom.

I like to keep the “header” always on the top.

It keeps on the top in all deskTop browsers and android phone)

But, I have a problem in safari of iPhone.

When I put my cursor just after the text “bottom” with iPhone safari at,
the safari keyBoard is appeared for waiting my touch.
in that time the header will be disappeared to over the top.

(when android keyBoard is appeared for waiting my touch
the header is not disappeared.)

Can I make the “header” to keep on the top when I write some text in the textArea with iPhone with your help?

It sounds like it’s maybe something peculiar to how the iOS works, so I’m not sure if it can be fixed. I don’t have an iOS device to test this, but one thing to try and see if it works.
Add position:sticky; to the header and top:0; Sticky is not yet widely supported, but Can I Use says Safari and iOS Safari support it. For browsers that don’t, keep position:fixed; in there before it. Actually, it will need prefixes too for Safari:-

header {
  position: fixed; /*for most browsers*/
  position: -webkit-sticky; /*for safari*/
  position: sticky; /* for Firefox */
  top: 0; /*tell it where to stick*/

Yes I think its the way the ios works and when the apple keyboard clicks in it automatically zooms the page so the fixed header moves out of view. It seems to be the same with a number of form controls like selects where the field gets zoomed while in focus.

Otherwise if your fixed header were taller and the keyboard takes up half the screen then there would be no room for the input content.

I thought it must be something like that. The keyboard is not part of the web-page or browser. It pushes part of the browser out of view to accommodate it. position: fixed applies only to the browser view, not the device screen.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.