OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

iOS keyboard adds extra padding to html on input focus

  • Thread starter Thread starter BardZH
  • Start date Start date
B

BardZH

Guest
iOS seems to be adding extra padding to HTML element when input is focus, even if the entire page says, don't overflow,don't add padding, just don't do anything, iOS is like F**K you!

This is when input box is not focused:

input not selected

When the input box receives focus:

when input is focused

this is probably the 100th post on this topic. codesandbox

2019 and this is still an issue, spend 2 days reading stack overflow and webkit website and nothing to seems to be working.

here is a list of related topics that don't work

position: fixed doesn't work on iPad and iPhone

iOS input focused inside fixed parent stops position update of fixed elements

iOS Safari css position fixed when textarea is focused

iOS iPad Fixed position breaks when keyboard is opened

How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?

Safari in ios8 is scrolling screen when fixed elements get focus How to stop mobile safari from setting fixed positions to absolute on input focus?

Fixed/absolute positioning neglected in iOS when focusing on input

<p>iOS seems to be adding extra padding to HTML element when input is focus, even if the entire page says, don't overflow,don't add padding, just don't do anything, iOS is like F**K you!</p>
<p>This is when input box is not focused:</p>
<img src="https://i.sstatic.net/HeaQP.png" width="300" alt="input not selected">
<p>When the input box receives focus:</p>
<img src="https://i.sstatic.net/OqSDs.png" width="300" alt="when input is focused">
<p>this is probably the 100th post on this topic.
<a href="https://codesandbox.io/s/xenodochial-wu-27lkf?fontsize=14" rel="nofollow noreferrer">codesandbox</a></p>
<p>2019 and this is still an issue, spend 2 days reading stack overflow and webkit website and nothing to seems to be working.</p>
<p>here is a list of related topics that don't work</p>
<p><a href="https://stackoverflow.com/questions/4889601/css-position-fixed-on-ipad-iphone/">position: fixed doesn&#39;t work on iPad and iPhone</a></p>
<p><a href="https://stackoverflow.com/questions...rent-stops-position-update-of-fixed-elements/">iOS input focused inside fixed parent stops position update of fixed elements</a></p>
<p><a href="https://stackoverflow.com/questions/39873553/ios-safari-css-position-fixed-when-textarea-is-focused/">iOS Safari css position fixed when textarea is focused</a></p>
<p><a href="https://stackoverflow.com/questions/14492613/ios-ipad-fixed-position-breaks-when-keyboard-is-opened/">iOS iPad Fixed position breaks when keyboard is opened</a></p>
<p><a href="https://stackoverflow.com/questions...om-moving-like-this-when-the-virtual-keyboar/">How do I stop my fixed navigation from moving like this when the virtual keyboard opens in Mobile Safari?</a></p>
<p><a href="https://stackoverflow.com/questions...rolling-screen-when-fixed-elements-get-focus/">Safari in ios8 is scrolling screen when fixed elements get focus</a>
<a href="https://stackoverflow.com/questions...ng-fixed-positions-to-absolute-on-input-focu/">How to stop mobile safari from setting fixed positions to absolute on input focus?</a></p>
<p><a href="https://stackoverflow.com/questions...neing-neglected-in-ios-when-focusing-on-input">Fixed/absolute positioning neglected in iOS when focusing on input</a></p>
 

Latest posts

Top