position:fixed is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari

• Component: CSS
• Status: RESOLVED FIXED

[Chris Rebert]

Created attachment 268854 [details]
GIF video demonstrating the bug

Original Bootstrap bug report: https://github.com/twbs/bootstrap/issues/18859
iOS version: 9.2
Hardware: iPhone 6S Plus
Device orientation: Landscape

Steps to reproduce:
1. Open Safari
2. Rotate the screen so it's in Landscape orientation
3. Navigate to a webpage
4. Open a new tab
5. Navigate to http://getbootstrap.com/javascript/#modals-sizes
6. Ensure that Safari's tabs bar is visible. (If it's not, scroll down and then up so it becomes visible.)
7. Tap either the "Large modal" or "Small modal" button

Expected result:
The position:fixed Bootstrap modal element should be visible and positioned within the bounds of the visual viewport

Actual result:
The position:fixed Bootstrap modal element isn't visible.
To bring it into view, you must scroll the page down (and thus cause the tabs bar to hide).

Additional notes:
This bug only occurs when Safari's tabs bar is visible.
(And thus it never occurs when in Portrait orientation.)
If you hide the tabs bar (by scrolling down) before tapping the button, this bug doesn't occur.
If the device is in Landscape orientation but has no other tabs open, this bug doesn't occur.
This bug doesn't occur in OS X Safari 9.0.2.

[Chris Rebert]

Created attachment 268855 [details]
GIF video demonstrating correct behavior when tabs bar is absent

[Radar WebKit Bug Importer]

<rdar://problem/24191746>

[Simon Fraser (smfr)]

This may be fixed in iOS 10.3.

[Simon Fraser (smfr)]

I confirm this is fixed.