WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#51617 closed defect (bug) (duplicate)

function _admin_bar_bump_cb() conflict with admin-bar.css on screens <= 600px

Reported by: zeinnicholas Owned by:
Milestone: Priority: normal
Severity: minor Version: 5.6
Component: Toolbar Keywords:
Focuses: ui, css Cc:

Description

Hello guys,

there is a conflict between how the CSS is applied to the <html> tag in the function _admin_bar_bumb_cb() (see admin-bar.php#L1147) and the #wpadminbar on viewports equal or under 600px.

Since the position of the #wpadminbar changes to absolute (see: admin-bar.css#L1012), a gap between the top of the page and the #wpadminbar appears on smaller viewports.

Absolute positioned elements are positioned within their direct containing box (e.g.: its direct parent element; see: CSS Position), so the current CSS doesn't work as expected since the margin-top is being applied to the html element, not the body.

The solution for this would be to change the CSS to a compatible declaration replacing the code between the lines #L1159 and #L1160 with the following:

html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }
body.admin-bar { padding-top: 46px !important; }

Specifying padding-top here is important since if containing boxes of absolute positioned elements have margins, they are added to the offset of the absolute positioned element not absorbed by it.

This bug was introduced in changeset:26072, but now that mobile editing has become more common, this is affecting the UX more when visiting the frontend while logged-in.

Thanks in advance.

Change History (3)

#1 @zeinnicholas
5 weeks ago

  • Summary changed from function _admin_bar_bump_cb() conflict on screens <= 600px to function _admin_bar_bump_cb() conflict with admin-bar.css on screens <= 600px

On second thought, I think it's better to approach this differently.

It's better if we simply add the following CSS property to admin-bar.css#L1011:

        #wpadminbar {
                position: absolute;
                top: -46px;
        }

This way we can avoid possible issues with other CSS applied to the body.

#2 @SergeyBiryukov
4 weeks ago

  • Focuses coding-standards removed
  • Keywords needs-patch needs-refresh needs-design needs-design-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Hi there, welcome to WordPress Trac!

Thanks for the report, we're already tracking this issue in #26609.

It looks like the issue only affects themes with body { position: relative; }. I could not reproduce it in any of the default WordPress themes.

#3 @zeinnicholas
4 weeks ago

Thanks @SergeyBiryukov.

Still, making the change wouldn't affect other themes (tested on TwentyTwenty).

I understand now that this was being tracked on another issue, but unfortunately, the TRAC search features are useless. It took me several hours to try and find a similar issue, and to find every information I could gather.

Sorry for the duplicate anyway! I'm glad this is already being tracked.

Thanks!

Note: See TracTickets for help on using tickets.