18804973: translate3d(0,0,0) rendering bug on iOS

[openradar-mirror]

Description

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 22108118: Apple Music: No Love Icon On CarPlay #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: twbs/bootstrap#14603

Configuration:

Attachments:
'bugvid.gif' was successfully uploaded.

Product Version:
Created: 2014-10-29T00:47:24.348248
Originated: 2014-10-28T17:42:00
Open Radar Link: http://www.openradar.me/18804973