iPhone Issue scroll issue on pop-up

Question

Facing an issue in iPhone, creating a chatting web application. Having chat window on pop-up fixed position. when click on text input to send message, iPhone keyboard open it and shift the header part of chat section to top

Need to fix Header and text-area should always be visible same as in whats-app Set header-part to fixed position and same text-area on fixed, even keyboard is open or not Prevent this shifting of header on top means prevent the iPhone scroll

Note: It is working fine in Android phone. Only issue with iPhone browsers, may be due to iPhone scroll.

Answer 1

Here is a simple conceptual example :

<article class="pop-up">
  <h3>Title</h3>
  <div class="content"> <p>Some scrollable content ...</p> </div>
  <div> Some CTA buttons that should be visible for the user </div>
</section>

CSS:

.pop-up {
 position: fixed;
 // some other styles to display it as a popup
}

.content {
position: relative; 
max-height: 100px; // set any max height that fits your design
overflow-y: scroll;
}