Bug Description

When the viewport is 600px wide, the admin bar no longs is positioned at the top of the page; a gap appears:

As soon as the window is resized to 601px wide, the admin bar is positioned as expected:

The issue appears to be this CSS which is added by AMP:

html.i-amphtml-fie:not(.i-amphtml-inabox)>body,
html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body {
    position: relative!important;
}

The reason for this CSS is explained as:

The position: relative is necessary to ensure that paddingTop can be applied to a document to offset the header height, and it doesn't missplace position: absolute elements.

This is combined with the fact that room for the admin bar is made for the page by adding a margin to the html element:

@media screen and (max-width: 782px) {
    html {
        margin-top: 46px !important;
    }
}

When the width of the page is greater than 600px, then the admin bar is position:fixed which means it does not get constrained by the body's positioning. However, as as soon as the window is 600px wide, then the admin bar gets position:absolute:

@media screen and (max-width: 600px) {
    #wpadminbar {
        position: absolute;
    }
}

Expected Behaviour

The admin bar should always be positioned at the very top of the screen.

Steps to reproduce

1. Activate Standard or Transitional mode.
2. Navigate to an AMP page with the Admin Bar displayed.
3. Resize the window to 600px, and notice the shifted admin bar.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Admin bar should always be positioned at the top of the window.

Implementation brief

When the admin bar is being shown on the page, we may need to forcibly override AMP's positioning with something like this:

add_action(
	'admin_bar_init',
	function () {
		wp_add_inline_style( 'admin-bar', 'html:not(#_) > body { position:unset !important; }' );
	}
);

The :not(#_) here is a hack to force higher specificity.

However, this may break things given the need for position: relative above. We need to look into the origins of this (e.g. ampproject/amphtml#8512, ampproject/amphtml#24269). If it turns out to just be for fixing an iOS scrolling bug, then it should be safe to override.

QA testing instructions

1. Log-in to WordPress.
2. Enable Transitional mode.
3. Navigate to the frontend and to an AMP page.
4. Resize the browser to 600px and narrower.
5. Verify that admin bar is always displayed at the very top of the page.

Demo

• See screenshots above for what to expect.

Changelog entry

• Fix positioning of Admin Bar in mobile viewport.