Open Radar

 
Summary:
The bug is provoked by this portion of the page's CSS:

.navbar-fixed-top,
.navbar-fixed-bottom
{
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

Removing these translate3d transforms avoids the bug.
translate3d(0, 0, 0) is commonly used to increase performance by attempting to force GPU acceleration; see e.g. http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/

Steps to Reproduce:
1. Open iOS Simulator for iPad 2 + iOS 8
2. Open Safari in the simulator
3. Open http://jsbin.com/dukoxo/1 in Safari
4. Zoom in on the navbar
5. Click/tap the left "Dropdown", then the right "Dropdown". (Note that a menu appears below the clicked "Dropdown".)
6. (You might need to repeat #5 a couple times)
7. The menu that appears below the right Dropdown will misrender, with a white rectangle obscuring the right half of the menu.

Expected Results:
The menu that appears below the right Dropdown should render normally/correctly.

Actual Results:
The menu that appears below the right Dropdown misrenders, with a white rectangle obscuring the right half of the menu.

Version:
iOS 8

Notes:
Also reported as https://bugs.webkit.org/show_bug.cgi?id=138162
Original Bootstrap bug report: https://github.com/twbs/bootstrap/pull/14603

Configuration:


Attachments:
'bugvid.gif' was successfully uploaded.