Focus v2: admin toolbar rendering issues

[johnbillion]

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?

[ocean90]

Have seen this in Chrome 39 on OS X too.

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

[iseulde]

Seems to be related to retina screens.

[dd32]

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).

[dd32]

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]

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

[johnbillion]

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

[SergeyBiryukov]

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

[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]

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]

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.

[azaozz]

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.

[adamsilverstein]

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).

[markjaquith]

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

[johnbillion]

Closing as fixed. Any issues? Re-open!