WordPress.org

Make WordPress Core

Opened 2 years ago

Last modified 5 months ago

#26485 new defect (bug)

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

Description

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 2 years ago.
iPad Scrolled Top
IMG_0745_2013_12_08_02h41m46s.PNG (270.5 KB) - added by miqrogroove 2 years ago.
iPad Scrolled Bottom
side-by-side.png (18.2 KB) - added by miqrogroove 2 years ago.

Download all attachments as: .zip

Change History (9)

@miqrogroove
2 years ago

iPad Scrolled Top

@miqrogroove
2 years ago

iPad Scrolled Bottom

#1 @SergeyBiryukov
2 years ago

  • Keywords ui-focus added

#2 @csixty4
2 years 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 2 years ago by csixty4 (previous) (diff)

#3 @helen
2 years ago

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

#4 @csixty4
2 years 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.

#5 @iseulde
16 months ago

  • Component changed from Administration to Toolbar

#6 @morganestes
5 months ago

  • Summary changed from RC1 Has 2 Different Admin Bars When Scrolling on iPad to Visually Different Admin Bars When Scrolling on iPad
Note: See TracTickets for help on using tickets.