WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 5 weeks ago

#44070 new defect (bug)

Avoid flickering of admin notices

Reported by: birgire Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: General Keywords: has-screenshots
Focuses: administration Cc:

Description

Here's an example:

  • Save settings on the General Settings page (wp-admin/options-general.php)
  • Then the "Saved settings" admin notice displays first above the page header.
  • Then it moves below it, causing flickering.

The admin notices are moved with Javascript in wp-admin/js/common.js

/*
 * The `.below-h2` class is here just for backward compatibility with plugins
 * that are (incorrectly) using it. Do not use. Use `.inline` instead. See #34570.
 * If '.wp-header-end' is found, append the notices after it otherwise
 * after the first h1 or h2 heading found within the main content.
 */
 if ( ! $headerEnd.length ) {
     $headerEnd = $( '.wrap h1, .wrap h2' ).first();
 }
 $( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2' ).insertAfter( $headerEnd );

See ticket #35047 and changeset [36134]. Also ticket #34570 and changeset [35516].

The same happens for notices on the other admin Settings screens, like:

  • wp-admin/options-writing.php
  • wp-admin/options-reading.php
  • wp-admin/options-discussion.php
  • wp-admin/options-permalink.php
  • wp-admin/profile.php
  • wp-admin/user-edit.php?user_id=123
  • ... etc ...

We should avoid this flickering, e.g. hide it with CSS and display it with Javascript?

I guess we should also consider the case if Javascript is turned off?

Related #43978 Avoid flickering on the Tools / Export page

Attachments (2)

flickering-on-saving-settings.gif (93.1 KB) - added by birgire 5 weeks ago.
flickering-on-saving-media-options.gif (49.1 KB) - added by birgire 5 weeks ago.

Download all attachments as: .zip

Change History (6)

#1 @subrataemfluence
5 weeks ago

I could not reproduce it for any of the mentioned pages. I went to those pages and Saved without making any changes.

Are you on a clean WordPress install and without any 3rd party plugin? Am I missing something?

#2 @birgire
5 weeks ago

@subrataemfluence thanks for checking.

It's on a clean trunk install, but I had a single plugin active, the Query Monitor plugin.

That seems to delay things here ;-)

You're right, that without it this is almost not noticable.

PS: I tested saving settings here (without QM):

wp-admin/options-media.php

and I noticed the flicker in 3 times out of 10.

It could also depend on how fit the browser is at the time ;-)

Last edited 5 weeks ago by birgire (previous) (diff)

#3 @subrataemfluence
5 weeks ago

Please let me know the exact steps to reproduce.

#4 @birgire
5 weeks ago

@subrataemfluence:

  • Clean install from development trunk (no plugins activated).
  • Goto /wp-admin/options-media.php.
  • Save changes.
  • I tested in Chrome browser and the flicker shows in c.a. 1 out of 5 times.
  • I tested in Edge browser and the flicker always shows.

CPU on my Windows 10 is < 40%

flickering-on-saving-media-options.gif is a screen-recording from a clean trunk install (no plugins) in Chrome.

Note: See TracTickets for help on using tickets.