Visually Different Admin Bars When Scrolling on iPad

[miqrogroove]

This is a really weird one. See the attached screen shots, and look very closely at the fonts and icons in the admin bar.

When I scroll to the bottom of the page, a visually different admin bar is presented.

When I scroll to the top of the page, the admin bar switches back.

The heck?

[miqrogroove]

iPad Scrolled Top

[miqrogroove]

iPad Scrolled Bottom

[csixty4]

Looks like an iOS rendering quirk. The actual font weights or colors don't appear to be changing in Web Inspector, but there's a definite change in appearance once scrolled.

Was able to work around this by hinting admin bar links to render using the GPU:

.ab-item {
-webkit-transform: translate3d(0,0,0);
}

Also seems to work with the transform applied to the whole #wpadminbar div instead, which might be a more efficient solution.

[helen]

What kind of impact does forcing rendering to the GPU have, e.g. on older devices?

[csixty4]

It shouldn't have any effect, really. This is pretty light-weight as far as GPU operations go, and a browser that doesn't support GPU rendering or CSS3 will just treat it like a 0-degree translation or nothing special at all.

[akibjorklund]

I tested this with iOS 7, 8 and 9. I was only reproduce the issue on iOS 7. Thus, I think this ticket should be closed, since the market share of those old versions is pretty low.