Created attachment 240582 [details]
GIF video of the bug occurring
Original Bootstrap bug report: https://github.com/twbs/bootstrap/pull/14603
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.
See also the GIF video in this comment: https://github.com/twbs/bootstrap/pull/14603#issuecomment-56440223
The bug is provoked by this portion of the page's CSS:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Removing these translate3d transforms avoids the bug.
(This was also filed as <rdar://problem/18804973> )
Does this reproduce on iPhone/iPad devices?
It has been reproduced on
an iPad running iOS 7.1.2
and an iPhone 5S running iOS 7.0.4.
Haven't had the chance to test against physical iOS 8 devices.
I reproduced just now on an iPad mini (MD528FD/A) running iOS 8.1 (12B410) and on an iPhone 5 (MD297DN/A) also running iOS 8.1 (12B411)
This only happens when you zoom in.
I reproduced this same bug on an iPhone running iOS 7, so it's not a regression in iOS 8.
I think what's happening here is that when clicking on the dropdowns, the GraphicsLayer is changing size from BIG to SMALL temporarily, but a bunch of repaints come in when it's SMALL and we clip them using layer size. Then it gets resized to BIG again (but we don't repaint the new area), then process the (clipped) repaint rects.
reproduced today on an iPhone 5 with iOS 9.3.2 :(
I can't seem to repro with iOS 10.0.1 on iPhone 5S.