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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduced area of amp-story-attachment #37234

jaygray0919 opened this issue Dec 16, 2021 · 1 comment · Fixed by #37277

Reduced area of amp-story-attachment #37234

jaygray0919 opened this issue Dec 16, 2021 · 1 comment · Fixed by #37277


Copy link


Prior to some time in September 2021 the amp-story-attachment opened to an area ~80% of the amp-story container.
The attachment borders were rounded and y-overflow enable scrolling.
The total area is important to us because, based on advice from Jon Newmuis @newmuis , we have moved iframes - featuring production applications - from a grid to an attachment (for amp-validation).
Then, as a preview, we use a screenshot of the production application in a grid.

Sometime during September 2021 the amp-story runtime changed to substantially compress the height and width of the attachment.
Currently, the attachment area is ~60% of the original area.

When viewed in desktop-landscape the "haircut" is significant.
Images that previously were completely "above the fold" are now bisected and require scrolling to see the image.
Text that previously was visible below an image is now only visible after scrolling.
And, of course, it is the text that is most important because, in many cases, it complements the image repeated from the grid.

When the same amp-story is presented using amp-story-player, the attachment - in effect - is unusable.
The screenshot illustrates the issue.

Our feature request is to provide the equivalent of an SVG viewBox inside an SVG viewPort.
There might be a default viewBox for an attachment (e.g. the current specification) with an option to specify a viewBox that could be up to 90% of the amp-story container (the equivalent of an SVG viewPort).

For CSS, the 'viewBox' might be some (maximum) percent of the amp-story container.
Such an approach might work well for both portrait and landscape.

Please consider the problem and proposed solution.
Currently, our desktop-landscape stories are significantly impacted, and our amps-story-player - on a single HTML page - is unusable.

Alternatives Considered

Add a link to view an external HTML page

Additional Context


Copy link

processprocess commented Dec 28, 2021

Example of attachments looking squished in inline player.

From looking back at previous UX for page-attachments in supports-landscape mode:
Attachments would become full-bleed when when not in desktop mode.

The height of 60vh on this line appears to the be causing this.

Proposed solution:
Set a min-height for supports landscape attachment containers, allowing them to fill the full screen on small viewports:

Our feature request is to provide the equivalent of an SVG viewBox inside an SVG viewPort.

A publisher configurable dimension of the attachment could create inconsistent user experiences. The proposed solution of a min-height on attachments will help create a consistent experience while helping content be displayed in the maximum area possible on smaller viewports.

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