i'm a new learner in web development. so , sorry if this question make u fill confused for what i mean.

i found a problem when i saw my web page in mobile version on form textarea. everytime i clicked the field area to fill it and click the button beside. the keyboard always closes the textfield area, and makes viewport behind it zoomed out.

i set the position form to relative by the way.

this i attach the view before and after i click it.

pic before
pic after

and this the code for the html and css i use, (let me know if this need to be solve by jquery and javascript ) :

        <div class="newslatter">
            <form>
                <input type="email" name="email" id="mail" placeholder="Enter Your Email" autofocus required>
                <input type="submit" name="submit" value="Let's Start !">
            </form>
        </div>

for the css :

.newslatter form {
  width: 380px;
  max-width: 100%;
  position: relative;
}
.newslatter form input:first-child {
  display: inline-block;
  width: 100%;
  padding: 14px 130px 14px 15px;
  border: 3px solid var(--main-color);
  outline: none;
  border-radius: 30px;
}
.newslatter form input:last-child {
  position: absolute;
  display: inline-block;
  outline: none;
  border: none;
  background-color: var(--main-color);
  color: white;
  border-radius: 30px;
  padding: 10px 30px;
  box-shadow: 0 0 5px #000, 0 0 15px #858585;
  top: 7px;
  right: 6px;
  cursor: pointer;
  transform: 0.5s;
}
.newslatter form input:last-child:hover {
  transform: scale(0.95);
}