Make WordPress Core

Opened 22 months ago

Last modified 9 months ago

#26485 new defect (bug)

RC1 Has 2 Different Admin Bars When Scrolling on iPad

Reported by: miqrogroove Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 3.8
Component: Toolbar Keywords:
Focuses: ui Cc:


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?

Attachments (3)

IMG_0744_2013_12_08_02h41m39s.PNG (264.4 KB) - added by miqrogroove 22 months ago.
iPad Scrolled Top
IMG_0745_2013_12_08_02h41m46s.PNG (270.5 KB) - added by miqrogroove 22 months ago.
iPad Scrolled Bottom
side-by-side.png (18.2 KB) - added by miqrogroove 22 months ago.

Download all attachments as: .zip

Change History (8)

@miqrogroove22 months ago

iPad Scrolled Top

@miqrogroove22 months ago

iPad Scrolled Bottom

@miqrogroove22 months ago

comment:1 @SergeyBiryukov22 months ago

  • Keywords ui-focus added

comment:2 @csixty422 months ago

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.

Last edited 22 months ago by csixty4 (previous) (diff)

comment:3 @helen22 months ago

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

comment:4 @csixty422 months ago

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.

comment:5 @iseulde9 months ago

  • Component changed from Administration to Toolbar
Note: See TracTickets for help on using tickets.