WordPress.org

Make WordPress Core

Opened 4 years ago

Last modified 4 months ago

#42300 new defect (bug)

Admin Bar CSS assumes body is not positioned

Reported by: joyously Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.5.7
Component: Toolbar Keywords: needs-patch
Focuses: css Cc:

Description

The Admin Bar is appended to the body of the page, and uses position: fixed for large windows. A space is made for it by using margin-top on the html tag.
This works fine until the media query for smaller windows changes it to position: absolute and there is user or theme CSS with body {position: relative}. The bar is then positioned relative to the body instead of html (leaving the margin visible and the bar over the top of body content).

I discovered this because I wanted to add a background overlay on the body, independent of the custom background, so I set the body position to relative and body:before to absolute.

A possible solution is to use body padding instead of html margin, but that might interfere more with theme CSS than the current method.

Attachments (1)

42300.body-position-relative.patch (519 bytes) - added by sabernhardt 6 months ago.
set body to relative positioning in the admin bar CSS at 600px for the front end only

Download all attachments as: .zip

Change History (10)

#1 @SergeyBiryukov
4 years ago

Related: #30055

Last edited 4 years ago by SergeyBiryukov (previous) (diff)

#2 @sabernhardt
9 months ago

  • Focuses css added

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


8 months ago

@sabernhardt
6 months ago

set body to relative positioning in the admin bar CSS at 600px for the front end only

#4 @sabernhardt
6 months ago

  • Keywords has-patch needs-testing added

Using padding instead of margin probably would help with full-page layouts as well (#43244), though the discussion on #16222 concluded that margin was safer then. So it's unlikely safe to switch that 10 years later.

I uploaded another possibility: making the body positioned relative for everybody on the front end (not the admin side). So far, I tested it with Twenty Twenty-One and did not see any problem with this quick proof-of-concept using that theme.

#5 @joyously
6 months ago

Perhaps instead of
body:not(.wp-admin)
it should be
body.admin-bar:not(.wp-admin)
so it is only changed when the admin bar is there.
Of course, with this change, themes could have a problem if they already calculated that the admin bar was overlapping by 46px. My theme makes the body relative already, and I have
body.admin-bar { min-height: calc(100vh - 46px); }
I think I might have to change that with your proposed patch.

#6 @sabernhardt
5 months ago

#43244 was marked as a duplicate.

#7 @sabernhardt
4 months ago

  • Keywords needs-patch added; has-patch needs-testing removed
  • Milestone changed from Awaiting Review to Future Release

As I mentioned on ticket:40544#comment:6, I would like to consider keeping the position fixed. Browser support is at least better now, and I think it might be enough. If fixed positioning still is not an acceptable option, though, we need to find another way to fix this bug.

Do you have examples of themes with the relative body positioning and/or full-height layout? I made edits to a theme for that, but testing real themes would be better.

#8 @joyously
4 months ago

I don't know the details of many themes. My theme https://wordpress.org/themes/twenty8teen/ makes the body relative and has the aforementioned body height adjustment for the admin bar in a media query.

#9 @sabernhardt
4 months ago

Thanks for the theme example!

Last edited 4 months ago by sabernhardt (previous) (diff)
Note: See TracTickets for help on using tickets.