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

Originator:cvrebert
Number:rdar://18804973 Date Originated:28-Oct-2014 05:42 PM
Status:Open Resolved:
Product:Safari Product Version:
Classification: Reproducible:
 
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.

Comments


Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!