WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 2 weeks ago

#26609 reopened defect (bug)

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

Reported by: Funkatronic Owned by:
Milestone: Future Release 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 6 months ago.
Fixed position issue when logged in for smaller screens

Download all attachments as: .zip

Change History (20)

comment:1 SergeyBiryukov7 months ago

Could not reproduce with Twenty Fourteen or Twenty Thirteen.

comment:2 dd327 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 Funkatronic7 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 7 months ago by Funkatronic (previous) (diff)

comment:4 follow-up: Veraxus7 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 7 months ago by Veraxus (previous) (diff)

comment:5 Veraxus7 months ago

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

comment:6 SergeyBiryukov7 months ago

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

comment:7 in reply to: ↑ 4 Funkatronic7 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 SergeyBiryukov7 months ago

  • Keywords reporter-feedback removed

comment:9 lee@…7 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 Veraxus7 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 7 months ago by Veraxus (previous) (diff)

comment:11 goto107 months ago

  • Cc dromsey@… added

sagarjadhav6 months ago

Fixed position issue when logged in for smaller screens

comment:12 sagarjadhav6 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 6 months ago by sagarjadhav (previous) (diff)

comment:13 dreamwhisper6 months ago

  • Cc baumann@… added

comment:14 UmeshSingla6 months ago

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

comment:15 iammattthomas4 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 ircbot3 months ago

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

comment:17 DH-Shredder3 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 SergeyBiryukov3 months ago

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

comment:19 UmeshSingla2 weeks ago

  • Keywords needs-refresh added
Note: See TracTickets for help on using tickets.