javascript - iOS - Fixed Header Position Shifts When Checkbox Closes Keyboard -

I have other Q & amp; The string, similar to my problem, though nothing is resolving my exact issue

I have a text field and there are 2 checkboxes below

An IOS On device & amp; In the text field (virtual keyboard display) the 'fixed' header remains in place, and the header still remains in the right place when clicking on the 'dan' on the keyboard

My problem once was by somebody The text is entered in the field and first clicked, the user unchecks the checkbox. This causes the header to be moved down.

It seems that the focus area of ​​the text field in the checkbox closes / closes the keyboard and closes the header's nature.

If the user monitors the screen, then it can return to the correct position. - Then, some focus is not recorded between the states of amp; Dim.

Any help would be greatly appreciated

thanks,

Image 1: Enter text in text field Image 2: Click after text input - Remove the text image 3: Enter text in the text field, then unchecking a checkbox - Remove the keyboard & amp; Header Status 'Transfer'

HTML:

  & lt; Div class = "tweet-inputs" & gt; & Lt; Text field name = "tweet" class = "tweet ground" placeholder = "share your thoughts ..." maxlength = "140" ng model = "tweetStatus" & gt; & Lt; / Text field & gt; & Lt; / Div & gt; & Lt; Div class = "clearfix" & gt; & Lt; Div class = "check" & gt; & Lt; Input type = "checkbox" value = "" name = "auto-tag" ng model = "autoHash" /> AutoHashtag #MakeDid & LT; Input type = "checkbox" value = "" name = "auto tag" ng-model = "autohash2" /> auto hashtag # design indob & lt; / Div & gt; & Lt; A value = "post" class = "tweet-btn neo-btn" ng-click = "sendTweet (tweetStatus, autoHash, autoHash2, replyOn)" & gt; Post & lt; / A & gt; & Lt; Span class = "spinning" & gt; & Lt; / Span & gt; & Lt; / Div & gt;  

CSS:

  .header-wrapper {background: # 7a7575; Z-index: 99; Box-Shadow: None; Text align: center; White color; Height: 75px; Status: fixed; Top: 0; Left: 0; Width: 100%; JS (I've included but does not work):  
  $ ('input [type =' checkbox "] ') .on $ ('Focus', function ($)' $ '(' title ') CSS ({position:' full ', top:' 0 '}) $ (window) .scrollTop (0)}) $ (' input [ Type = "checkbox"] '(' stigma ', function () {$ (' title-wrapper ') CSS ({condition:' fixed '})}).' ')  
 

This issue appears to be related to iOS how to fix fixed-position elements when the iPad keyboard appears Is handled. It seems that iOS deploys fixed position positions completely and applies the calculation coordinates as it will appear in one place.

You can see it on a page with a fixed header form (eg, a billing address page) if you tap in the lower field to access the keyboard and then scroll back to the page If there are fixed headers hanging there, some forms are obscuring ...

It seems that there is another issue on the matter in this case, and when the user immediately clicks on a keyboard input ( Text, text field, e Mail, etc.), by which the element with the position determined does not lose its wrong full position. It is not certain if this is a bug or what is in iOS, but it is definitely a rendering inconsistency.

My solution for this is to draw the page (jQuery):

  $ ('[type =' checkbox "] '). ('Click', function () {window.setTimeout (function () {$ (window) .scrollTop ($ (window) .scrollTop ());}, 20);});  

setTimeout is required, as I think it delays enough time to delay the submission of this page. setTimeout Unconditional attempts have not worked for me at all.