position:fixed-related rendering bug on iPad Pro in Landscape orientation

• Component: CSS
• Status: NEW ---

[Chris Rebert]

Created attachment 268073 [details]
Screenshot of the rendering bug

iOS version: 9.2
Hardware: iPad Pro
Device orientation: Landscape
Original Bootstrap bug report: https://github.com/twbs/bootstrap/issues/18738

Steps to reproduce:
1. Get an iPad Pro (or open the Xcode Simulator for iPad Pro).
2. Rotate the device (or use the "Rotate Right" in the Simulator) so that it is in a landscape orientation.
3. Open https://output.jsbin.com/sicula/1 in Safari
4. If using the simulator, ensure that the virtual device has actually remained in a landscape orientation.
     (Opening Safari appears to reset the orientation to Portrait in some circumstances.)
5. Tap the green "Setup" link on the webpage.
6. Observe that a menu is displayed below the link.
7. Tap the cyan "Tools" link on the webpage.

Expected result:
A menu should be properly displayed below the "Tools" link, like it was for the "Setup" link.

Actual result:
The menu displayed below the "Tools" link is missing a rectangular chunk on its left side.
See attached screenshot.

More details:
According to https://github.com/twbs/bootstrap/issues/18738 , this bug only occurs on iPad Pro and not on other iPad models.
This bug only occurs when the iPad Pro is in Landscape orientation, not when in Portrait orientation.
This bug only occurs when the navbar is styled as `position: fixed`.
This bug is visually very similar to (and thus presumably related to) https://bugs.webkit.org/show_bug.cgi?id=138162 ,
  although that bug involves zooming and applies to a wider range of iOS hardware models.

[Chris Rebert]

Created attachment 268074 [details]
GIF video demonstrating the bug

[Chris Rebert]

Filed a Radar:
<rdar://problem/24030853>

[Simon Fraser (smfr)]

I think this might be similar to bug 138162