Partially rendered translate3d(0,0,0) menus after zooming in

• Component: CSS
• Status: RESOLVED WORKSFORME

[Chris Rebert]

Created attachment 240582 [details]
GIF video of the bug occurring

Original Bootstrap bug report: https://github.com/twbs/bootstrap/pull/14603

To repro:
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:

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


Removing these translate3d transforms avoids the bug.

[Radar WebKit Bug Importer]

<rdar://problem/18807031>

[Chris Rebert]

(This was also filed as <rdar://problem/18804973> )

[Simon Fraser (smfr)]

Does this reproduce on iPhone/iPad devices?

[Chris Rebert]

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.

[Heinrich Fenkart]

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)

[Simon Fraser (smfr)]

This only happens when you zoom in.

[Simon Fraser (smfr)]

I reproduced this same bug on an iPhone running iOS 7, so it's not a regression in iOS 8.

[Simon Fraser (smfr)]

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 :(

[Chris Rebert]

I can't seem to repro with iOS 10.0.1 on iPhone 5S.