Amphtml: Moving elements for fixed layer can prevent CSS selectors from working

[nainar]

https://www.hiscox.com/amp/small-business-insurance/

See the following screenshot, which shows the phone number of a popup getting cut off, along with text above the button. It appears 5 seconds after page load using amp-animation.

The expected behavior is visible on their hosted AMP page. iPhone and Nexus emulation both display correctly. Visiting the hosted AMP page on my iPhone also displays it correctly.

iPhone

Nexus

The cache URL doesn't exhibit this issue in iOS or Android, so it appears to be a viewer issue.

Filed by Philip Kriegel at Google.

[sparhami]

The animations themselves are working just fine.

The positioning is due to the fixed layer handling moving elements. More specifically, the header bar is moved from the current location into the duplicated body. This prevents the following CSS rule from working correctly:

.ampstart-headerbar+:not(amp-sidebar),.ampstart-headerbar+amp-sidebar+* {
  margin-top: 2.8rem
}

The sibling selector no longer works since the .ampstart-headerbar has been moved to a different DOM subtree. I'm not aware of all the issues with fixed layer and why it is needed, but this is a known (though perhaps not communicated in documentation) consequence of AMP moving DOM elements for iOS iframes.

This can be worked around by changing the CSS to no longer rely on a sibling selector. That is, give the appropriate styling to the elements using a different selector by giving things a class to target.

[sparhami]

@nainar We can't actually fix this issue, but we can perhaps document it. There is also no way for us to validate which sibling selectors + or ~ will be impacted by this issue.

[choumx]

Looks like this CSS originates from ampstart, so this probably affects a bunch of other sites: https://github.com/ampproject/ampstart/blob/9acc6ca2e48f984f4749748cc53ab6405d47d4d4/components/navbar/navbar.css#L24-L27

Chatted with @jridgewell and there doesn't seem to be a good way to track and restore lost styles due to reparenting. 🤞 for scrolling iframes in iOS 13.

[philkrie]

What's the best way to deal with this on the client side? Are there any workarounds? It's a key component of their site.

+1 to documentation on this... easy to miss. In fact, would be great to have a tool that generates a group of screenshots that confirm everything looks consistent across AMP Viewer, Cache, and Hosted AMP across a range of devices.

[jridgewell]

Can you avoid any sibling selectors on fixed position elements?

[choumx]

Things to do here:

1. Add documentation for fixed position elements on iOS in iframes, and link to it from the console warning at runtime.
2. Refactor the amp-start template to avoid this edge case.

@jridgewell Let's schedule (1) for the fix-it.

[philkrie]

@jridgewell perfect, makes sense, I see @sparhami originally suggested that. Thanks!

[jridgewell]

Initial tests for iOS 13 look very good. It's possible we'll be able to disable our hack entirely and still get perfect fixed-position scrolling.

[choumx]

Can you share how we'd ship this (disabling the hack) to users?

[jridgewell]

It's controlled by the viewer: https://github.com/ampproject/amphtml/blob/e01933c4758e7441f38662ac7082ed44d48db5e1/src/service/viewport/viewport-impl.js#L1405-L1439