3

I have a div that acts as an overlay; I'm using position: fixed to accomplish this. In the overlay, I have a button. Normally, this works perfectly, but we've discovered a very strange bug that appears to be within Safari in iOS 10 on Plus-sized iPhones.

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">

    <input type="button" value="Input Button" />
    <button>Button</button>

</div>


<div>

  This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />This is the regular div. This is the regular div.
  <br />

  <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">

    <input type="button" value="Input Button" />
    <button class="pull-right">Button</button>

  </div>

</div>

Steps to Reproduce

  1. Confirm that the Tab Bar in Safari is enabled.
  2. Open at least 2 tabs.
  3. In portrait mode, load the page in question, with the position: fixed div visible.
  4. Rotate the phone to the landscape orientation.

Safari should now show the Tab Bar at the top of the screen, under the Address Bar. But if you try to press the button, it will not do anything. Instead, you have to press above the button (more specifically, about the height of the button above the button) and Safari will act like you now pressed the button.

Clarification: The Tab Bar does not show when in portrait mode, even when the Tab Bar setting is enabled; it only shows after you rotate to landscape, which is where the DOM or some rendering of the page gets "unsynced" in Safari.

What is even more strange is that if you rotate the device back to portrait and again to landscape an additional time (after steps 1 through 4 above), the button's "hitbox" will be shifted vertically yet again, which means now you have to press above the button roughly twice the height of the button up.

This is happening on iOS 10.1.1 but I'm unsure about other versions. Confirmed on both an iPhone 7 Plus and a 6S Plus. I did find this webkit bug which appears to be closely related but possibly different.

Any ideas?

Chad
  • 1,531
  • 3
  • 20
  • 46
  • Sounds like Safari not updating the containing block position properly on first rotation to landscape. Not surprised. – TylerH Nov 08 '16 at 22:02
  • Although it's more than just the first time because as stated, rotating back and forth multiple times will move the hitbox up the height of the button for as many times as you rotate back and forth. – Chad Nov 08 '16 at 22:03
  • So it's not updating the containing block position at all when switching to landscape. Is it positioned properly with the tab bar in portrait view? And is it positioned properly in either/both of the views *without* the tab bar? – TylerH Nov 08 '16 at 22:07
  • Possibly related: http://stackoverflow.com/questions/4889601/css-position-fixed-on-ipad-iphone and http://stackoverflow.com/questions/29894997/prevent-ios-bounce-without-disabling-scroll-ability/39821505#39821505 – TylerH Nov 08 '16 at 22:10
  • Try absolute position: absolute and append the div as direct child to parent – Santhosh Kumar Nov 09 '16 at 04:59
  • @TylerH in portrait view, there is not a tab bar. The problem arises when tab bar is enabled and switching to landscape then shows the tab bar, which appears to be messing up the DOM rendering or something... – Chad Nov 09 '16 at 15:06
  • @SanthoshKumar an absolute div will scroll out of view with longer pages if you try to scroll, which is not the desired effect.It should stay fixed even if the backdrop is scrolled. – Chad Nov 09 '16 at 15:06
  • I've noticed a similar "hitbox" shift on several iPad models and iOS versions. When the tab bar opens, the hit box on elements within position:fixed containers shifts up approximately by the tab bar height. A fix in my case was to wiggle the window scroll in the resize event. – peteorpeter Jun 09 '17 at 19:17
  • @peteorpeter, when you say you used a "wiggle" in the `resize` event, are you saying you literally used an `.effect( "shake" );`? Or what did you do to "wiggle" the element that readjusted the hitbox? – Chad Jun 13 '17 at 15:29
  • Haha, no I just had to change the scroll position by 1 pixel, something like `window.scrollTo(0, currentScrollY + 1)` – peteorpeter Jun 17 '17 at 03:46

1 Answers1

3

We had a similar issue and solved it by adding wrapper with transform:translate3d(0,0,0).

So, you'd end up with something like this:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; background: rgba(0, 0, 0, 0.25);">
    <div style="transform: translate3d(0,0,0);">
        <input type="button" value="Input Button" />
        <button>Button</button>
    </div>

mariomc
  • 965
  • 1
  • 10
  • 14