Twenty Twenty-One: Header display issue with AdWords mobile ads

[rezzap]

Steps to replicate

1. Navigate to a site with the AdWords mobile ads enabled.
2. On first load the header is set at the top.
3. Scroll down to reveal the pop-up ad.
4. Scroll back up and see the issue.

https://user-images.githubusercontent.com/10325627/126068285-a38fa6bf-8fef-47d6-8dff-83880baeb46f.MP4

Result

The navigation stays behind the ad while the site title gets pushed down.

Expected

I would expect that this would be adjusted to show below the ad or not respond at all.

The user reports this is working fine with any other theme, including twenty-twenty, so it appears specific to this theme. They have disabled all plugins except for Google Site Kit which they need for the ad to show and it didn't change anything.

• User report: 30639437-hc
• Follow-up ticket: 4140041-zen

[katiebethbrown]

I had the user in chat in 30718083-hc.

I did some testing, and what I found is that after SiteKit loads the anchor ad at the top, it listens for a scroll-up behavior. When it picks up a scroll back up, it's adds inline styles to the body tag that add 124px of padding to the top of the body.

What ends up making this look unexpected on the mobile version of Twenty Twenty One is that the menu button is positioned absolutely, so the padding at the top of the body doesn't apply, and it stays where it was initially while the title/tagline gets shifted down to account for the space the ad takes up.

That's because .menu-button-container is positioned absolutely and has padding set based on calculations that use a variable, so it isn't impacted by the change from Site Kit, and it's padding doesn't change along with the title, etc.

padding-bottom: calc(0.25 * var(--global--spacing-vertical));

---

Screencast:

I found a similar mention of the same behavior (though different main issue) here: https://github.com/GoogleChrome/lighthouse/issues/11004

[mrfoxtalbot]

Thank you for the additional details, @katiebethbrown.

Do you think it would it be possible to modify the version we are using on Twenty Twenty-One to change this top padding? Do you see it as a viable solution? Thanks again!