Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃枍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces #36133

Merged
merged 1 commit into from Sep 23, 2021

Conversation

coreymasanto
Copy link
Contributor

@coreymasanto coreymasanto commented Sep 22, 2021

The sticky positioning of the page attachment header does not work on iOS because of a known Safari issue where position: sticky fails if a parent element has overflow: auto set (see caniuse). I attempted to replicate sticky positioning via JS by setting the header's position: fixed whenever the sticky header was expected to be seen, but this also resulted in the header's layout being incorrectly altered.

The current behavior on iOS page attachments is such that the header transitions to its sticky layout whenever the attachment reaches full height, only for the header to be scrolled out of view. We have decided that we will prevent the sticky header layout from being shown on iOS at all, until a working solution for sticky positioning has been implemented.

Before:

After:

/cc @gmajoulet

#34504
#35569

@coreymasanto coreymasanto changed the title 馃枍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces. 馃枍 Restrict page attachment sticky header to non-iOS, non-Safari surfaces Sep 22, 2021
@coreymasanto coreymasanto marked this pull request as ready for review September 22, 2021 17:16
@amp-owners-bot
Copy link

Hey @gmajoulet, @newmuis! These files were changed:

extensions/amp-story/1.0/amp-story-draggable-drawer.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

Successfully merging this pull request may close these issues.

None yet

3 participants