WordPress admin bar changes to position:absolute (good), but the padding on the html element remainds (bad)

[RadGH]

Hi, excellent extension. I'm a WordPress developer and have an issue with the plugin that I have my own clientside fix that I plug in to CSS manually. After doing this dozens of times, I decided I should report it as a bug.

I took a video that quickly represents the issue: https://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-868470985522/ShareX/LimelightDept/2017/01/2017-01-25_15-03-20.mp4

Here is my fix, very simple, but should only be set while the screenshot is running:

#wpadminbar {
    position: absolute; /* your plugin already does this part */
    transform: translateY(-100%);
}

Here are the steps to reproduce:

1. Log in to a WordPress website
2. Notice the admin bar at the top is fixed, so it scrolls with the site. Normally an all-page capture would get the admin bar multiple times as it essentially scrolls the page to take more screenshots.
3. Take an all-page screenshot
4. Notice the admin bar is changed to position: absolute, so that it does not scroll with the page (which is good, for tall pages).
5. BUG: Notice the html element keeps its padding at the top of the page, which is where the admin bar floats when at the top of the page.

I might pass it off as a bug with WordPress, but since it seems this extension is setting the admin bar to position:absolute. And I do appreciate the consideration for fixed elements, some competing plugins do not even do that! But it overlaps instead, so it's not a perfect fix.

I was able to identify this by pressing F8 with dev tools open, which pauses chrome's window and rendering. When this happens, you can see for yourself that the HTML element has padding:

https://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-868470985522/ShareX/LimelightDept/2017/01/chrome_2017-01-25_15-06-48.jpg

And the admin bar has been (temporarily) set to position: absolute:

https://s3-us-west-2.amazonaws.com/elasticbeanstalk-us-west-2-868470985522/ShareX/LimelightDept/2017/01/chrome_2017-01-25_15-08-00.jpg

So the resolution is when the admin bar is overridden to absolute, also move it up on the page so it doesn't overlap other elements.

[Aminadav]

Thank's. I will take a look. If you have any more info, please share