WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#30516 closed defect (bug) (fixed)

Focus v2: admin toolbar rendering issues

Reported by: johnbillion Owned by:
Milestone: 4.1 Priority: high
Severity: normal Version: 4.1
Component: Editor Keywords: 2nd-opinion
Focuses: ui, administration Cc:

Description

When moving the mouse out of the editor (or tabbing out of it) after DFW has kicked in, the admin toolbar at the top of the screen fades back in but then all its content gets hidden.

This appears to be a rendering issue (not a CSS issue) because the items return when you move the cursor over the admin toolbar, or when DFW kicks in again.

Seen in Chrome 38 on OS X. Also tested in Firefox 33 on OS X with no issues.

Can anyone else reproduce?

Attachments (4)

30516.patch (381 bytes) - added by joemcgill 6 years ago.
30516.2.patch (391 bytes) - added by joemcgill 6 years ago.
30516.3.patch (912 bytes) - added by joemcgill 6 years ago.
30516.4.patch (451 bytes) - added by joemcgill 6 years ago.

Download all attachments as: .zip

Change History (21)

#1 @ocean90
6 years ago

Have seen this in Chrome 39 on OS X too.

See also https://github.com/avryl/focus/issues/15.

This ticket was mentioned in Slack in #feature-focus by janneke. View the logs.


6 years ago

#3 @iseulde
6 years ago

Seems to be related to retina screens.

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


6 years ago

#5 @dd32
6 years ago

Confirming that I've been seeing this too, Retina screen, Opera Chromium beta (Chrome/39.0.2171.62 Safari/537.36 OPR/26.0.1656.20).

#6 @dd32
6 years ago

Perhaps as a hint to work out why/what is happening, the Notifications/Search icons remain on WordPress.com, whilst on a WordPress install, all (including the Jetpack Notifications icon) icons disappear, at least for me.

@joemcgill
6 years ago

#7 @joemcgill
6 years ago

Adding transform: translateZ(0); to the .focus-off transition seems to clear up the issue in Chrome on retina screens.

#8 @johnbillion
6 years ago

In 30708:

Apply a no-op CSS transformation to the admin toolbar (among other elements) in order to trigger hardware acceleration when focus/DFW deactivates. This helps prevent rendering issues seen in browsers on Retina devices.

See #30516
Props joemcgill

#9 @SergeyBiryukov
6 years ago

Should we add a CSS comment with a ticket reference for [30708]?

#10 follow-up: @helen
6 years ago

  • Keywords 2nd-opinion added; needs-testing removed

I am a little concerned about any performance and stacking implications here - see http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0. If we have to do this, it should likely be -webkit- only.

@joemcgill
6 years ago

#11 in reply to: ↑ 10 @joemcgill
6 years ago

Since we're only going for a repaint, and not trying to get hardware acceleration with this patch, we can simplify this to use a 2D transform: transform: translate(0, 0); and avoid the issue Helen brings up.

30516.2.patch also adds the -webkit prefix.

Replying to helen:

I am a little concerned about any performance and stacking implications here - see http://stackoverflow.com/questions/10814178/css-performance-relative-to-translatez0. If we have to do this, it should likely be -webkit- only.

@joemcgill
6 years ago

@joemcgill
6 years ago

#12 @joemcgill
6 years ago

30516.4.patch Fixes a display issue in Chrome where the right meta boxes would disappear when the content was long enough to make the page scrollable by moving the transform property so it only applies to the #wp-toolbar.

#13 @azaozz
6 years ago

In 30710:

Editor, DFW v2: use a 2D transform to force repaint of the admin toolbar, only on #wp-toolbar. Fixes calculating the position of the right sidebar on fade-in and removes any performance and stacking implications.
Props joemcgill, see #30516.

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


6 years ago

#15 @adamsilverstein
6 years ago

Tested in chrome Version 39.0.2159.4 dev (64-bit) on a retina screen, was previously seeing issue, in latest trunk it is fixed. Also tested in Version 41.0.2237.0 canary (64-bit).

Last edited 6 years ago by adamsilverstein (previous) (diff)

#16 @markjaquith
6 years ago

No issues in Chrome 39.0.2171.71 (64-bit) on Hi-DPI screen.

#17 @johnbillion
6 years ago

  • Resolution set to fixed
  • Status changed from new to closed

Closing as fixed. Any issues? Re-open!

Note: See TracTickets for help on using tickets.