WordPress.org

Make WordPress Core

Opened 21 months ago

Closed 2 weeks ago

#26609 closed defect (bug) (wontfix)

Admin Bar pushed down at screens of 600px width and lower on the frontside

Reported by: Funkatronic Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Toolbar Keywords: needs-patch needs-refresh
Focuses: Cc:

Description

On a window resized to the width of 600px, the Admin menu bar shifts down, obscuring part of the blog's front end. The culprit CSS is found in admin-bar.min.css. There is a declaration of position:absolute that only gets triggered when the screen is width 600px and below. Disabling this css declaration in Chrome's developer's tools fixes the issue.

Broken:
http://www.crosseyedesign.com/adminbarbroken.jpg

Fixed:
http://www.crosseyedesign.com/adminbarfixed.jpg

Attachments (1)

admin-bar.css.patch (349 bytes) - added by sagarjadhav 20 months ago.
Fixed position issue when logged in for smaller screens

Download all attachments as: .zip

Change History (24)

comment:1 @SergeyBiryukov21 months ago

Could not reproduce with Twenty Fourteen or Twenty Thirteen.

comment:2 @dd3221 months ago

  • Keywords reporter-feedback added

More information is needed here, What theme are you running? What are the styles on *, body, and html? There's probably a position declaration there that doesn't play nice with the toolbar that needs to be looked into.

comment:3 @Funkatronic21 months ago

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

Thank you for the feedback: found the problem. The Foundation framework sets body as position: relative whereas the admin bar sorta needs it at static. Closing this ticket and sorry for the trouble

Last edited 21 months ago by Funkatronic (previous) (diff)

comment:4 follow-up: @Veraxus21 months ago

Confirming this problem.

At 600px, #wpadminbar is changed from position:fixed to position:absolute.

In CSS, fixed position is always relative to the window, whereas absolute positioning is relative to the first ancestor element with a non-static position.

Many major front-end frameworks and boilerplates use positioning overrides ( e.g. position:relative ) on the html and/or body elements as routine corrective/normalization practice - so when the admin bar changes from fixed to absolute positioning, it does not snap to the top of the window as expected, but to the top of the body element, which has been shifted 46px from the top of the window due to the top margin.

Considering how commonplace explicit body element positioning is as a routine normalization practice (particularly when off-canvas layouts are to be employed), I would say that this constitutes a serious problem/oversight in core.

There are a number of potential fixes by theme creators, but this should be remedied in core.

When the screen is max-width:600px, the html and body should be explicitly set to position: relative (which is more common than not, anyway). The admin bar should then be positioned top:-46px to compensate. Problem solved.

Last edited 21 months ago by Veraxus (previous) (diff)

comment:5 @Veraxus21 months ago

  • Keywords needs-patch added
  • Resolution invalid deleted
  • Status changed from closed to reopened

comment:6 @SergeyBiryukov21 months ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to 3.9

comment:7 in reply to: ↑ 4 @Funkatronic21 months ago

  • Keywords reporter-feedback added

Replying to Veraxus:

Confirming this problem.

At 600px, #wpadminbar is changed from position:fixed to position:absolute.

In CSS, fixed position is always relative to the window, whereas absolute positioning is relative to the first ancestor element with a non-static position.

Many major front-end frameworks and boilerplates use positioning overrides ( e.g. position:relative ) on the html and/or body elements as routine corrective/normalization practice - so when the admin bar changes from fixed to absolute positioning, it does not snap to the top of the window as expected, but to the top of the body element, which has been shifted 46px from the top of the window due to the top margin.

Considering how commonplace explicit body element positioning is as a routine normalization practice (particularly when off-canvas layouts are to be employed), I would say that this constitutes a serious problem/oversight in core.

There are a number of potential fixes by theme creators, but this should be remedied in core.

When the screen is max-width:600px, the html and body should be explicitly set to position: relative (which is more common than not, anyway). The admin bar should then be positioned top:-46px to compensate. Problem solved.

Actually, wouldn't it be position:static since that is the default positioning for most elements in html? I tried relative and it stayed the same but static fixed the issue.

comment:8 @SergeyBiryukov21 months ago

  • Keywords reporter-feedback removed

comment:9 @lee@…21 months ago

I often have the body element set as relative and this problem is effecting me also.

Is the idea of making the admin bar absolute positioned instead of fixed at max-width 600px to save on screen real estate on smaller screens? The 46px of display is only lost when logged in and so not really an issue in my mind.

I would suggest the fix is to leave the element #wpadminbar position fixed at all screen sizes.

As a developer If I already had a fixed element at the top of the window on small screens I could push it down if necessary using the admin-bar body class. Easiest option to manage.

Cheers - Lee.

comment:10 @Veraxus21 months ago

I think Lee's suggestion is probably the most practical. Definitely more practical than mine.

@Funkatronic: Yes, position:static is the default state, but putting position:relative on the body forces descendants to obey it's boundaries, which can provide numerous "mechanical" benefits (and avoid some hard-to-solve problems with certain layouts)... which is why it's so common.

Last edited 21 months ago by Veraxus (previous) (diff)

comment:11 @goto1021 months ago

  • Cc dromsey@… added

@sagarjadhav20 months ago

Fixed position issue when logged in for smaller screens

comment:12 @sagarjadhav20 months ago

Above issue can be replicated while using framework like foundation as already described by most of the users above.
Most of the frameworks apply position: relative to body.
For @media screen and (max-width: 600px) , WordPress adds a style for Admin bar
#wpadminbar { position: absolute; }

Removing that particular css fixes the problem, without causing any additional issue on any other device or browser.

Last edited 20 months ago by sagarjadhav (previous) (diff)

comment:13 @dreamwhisper20 months ago

  • Cc baumann@… added

comment:14 @UmeshSingla20 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

comment:15 @iammattthomas18 months ago

For the sake of background: the reason the adminbar scrolls at mobile sizes is because a fixed-height, fixed-position element causes major problems when you tap/pinch-to-zoom in mobile browsers. MP6 originally disabled zooming in mobile browsers but we were encouraged to allow it for accessibility reasons. So that's why the existing code is there.

As for a different technical solution for achieving the same effect without the problem described above: no opinion there.

comment:16 @ircbot17 months ago

This ticket was mentioned in IRC in #wordpress-dev by DH-Shredder. View the logs.

comment:17 @DH-Shredder17 months ago

  • Keywords needs-patch punt added; has-patch needs-testing removed

It looks like the consensus is that the current patch is not the ideal fix for this issue.

Going to suggest we move this off 3.9, since there isn't a current agreed-upon solution or patch.

comment:18 @SergeyBiryukov17 months ago

  • Keywords punt removed
  • Milestone changed from 3.9 to Future Release

comment:19 @UmeshSingla14 months ago

  • Keywords needs-refresh added

comment:20 @juiceboxint8 months ago

If you use the Google "Website Translator" widget anywhere on your page, it will force
position: relative on the body, so whether or not you wanted or needed to use body { position: relative } in your code, you may find that you get it anyway.

The best fix I've found to this is to set the body to position: relative in your CSS—so it's present on initial page load and doesn't cause any flashes when the JS does its thing—then add the following to handle the admin bar at screen sizes less than 600px:

@media (max-width: 600px) {
	html #wpadminbar { top: -46px; }
}

The admin bar still has placement issues when you actually use the translation while logged in, because Google adds its own "admin bar" to the top of the site—so it won't work as well if people who have accounts on the site will need to use the translation feature, but it should work in most situations anyway.

comment:21 @morganestes3 weeks ago

  • Resolution set to invalid
  • Status changed from reopened to closed

I've tested this out on 4.3 trunk with Twenty Fifteen and can't reproduce it. Since it seems dependent on which theme is running and the styles specific to that theme (not core), I'm going to close this out.

If anyone can consistently reproduce this in a way that fixing it in core makes sense for the majority, we can revisit it then.

comment:22 follow-up: @atomicjack2 weeks ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

There is actually a fix that can be put into WordPress core to fix this for every theme.

Change the #wpadminbar to position:fixed;

That resolves the issue and doesn't cause any problems.

comment:23 in reply to: ↑ 22 @ocean902 weeks ago

  • Milestone Future Release deleted
  • Resolution set to wontfix
  • Status changed from reopened to closed

Replying to atomicjack:

Change the #wpadminbar to position:fixed;

That resolves the issue and doesn't cause any problems.

We don't want to have a fixed toolbar on mobile.

Note: See TracTickets for help on using tickets.