Virtual keyboard breaks position:fixed elements in iOS

user_4222 0
Viewed 5149

Tested with both Safari and Chrome on iPhone 6 Plus in iOS 11. I have a comment dock panel with the following HTML structure and CSS:

HTML:

<div class="highlighter-docked-panel shown">
    <div class="highlighter-docked-header">Add Comment</div>
    <div class="highlighter-comments-user">...user inner html...</div>
    <div class="highlighter-comment">
        <div id="respond" class="comment-respond">...comment form html...</div>
    </div>
    <div class="btn-confirm confirm-no">Cancel</div>
</div>

CSS:

.highlighter-docked-panel {
    right: -100%;
    opacity: 0;
    bottom: 85px;
    z-index: 999999;
    position: fixed;
    width: 300px;
}
.highlighter-docked-panel.shown {
    right: 0;
    opacity: 1;
}

The panel is a direct child of the body tag and is not nested within any other html elements. I'm using Web Inspector to debug this from Safari on my desktop with my iPhone connected, so that I can inspect the DOM and see what the browser sees.

As you can see from the following screenshots, when I open the virtual keyboard, the comment dock panel moves up, which is to be expected. However I can't interact with it like I should be able to (e.g. I can't click into the textarea again or the RESPOND or CANCEL buttons), so I used the Inspect Element to highlighted the dock, and it appears the positioning doesn't match up. With the virtual keyboard shown, the browser doesn't see that the fixed dock has actually moved up, as is evident when I select the panel in the inspector.

Panel positioning before keyboard is shown (disregard the highlight text handles - those are under the fixed dock panel):

enter image description here

Panel positioning after keyboard is shown:

enter image description here

Why would the browser show the panel in a different position visually than where it really thinks it is? Is there a way to "refresh" the fixed panels after the keyboard is shown?

This also happens with other position:fixed elements that I have such as a login form that overlays the entire page.

web-inspector safari css jquery ios
1 Answers

This is the expected behavior. When the keyboard is opened, it does not overlay the browser's view port. It shrinks the view port to make room for the keyboard. Your comments panel is still positioned 85px from the bottom of the newly shrunken view port. You may want to try putting the comment panel inside the container that the text is in. Then make that containers position: relative and the highlighter-docked-panel position: absolute. If I understand your question correctly, that should be the look you are going for.

Edit: although in that scenario, the user won't be able to see what they are typing.

user_28604600
Related