Amphtml: amp-story: "lower-third" grid area incorrectly positioned

Created on 11 Feb 2018 · 12Comments · Source: ampproject/amphtml

This only appears to affect beta versions of Safari.

The "lower-third" grid area of the "thirds" template is not positioned in the bottom third of the viewport in beta versions of Safari. (Screenshots are from desktop Safari Technology Preview Release 49 (Safari 11.2, WebKit 13606.1.3.3); it has been reported that the version of Safari that ships with the beta version of iOS exhibits the same behavior.)

Actual (beta Safari):

screen shot 2018-02-11 at 18 32 22

Expected (stable Safari):

screen shot 2018-02-11 at 18 32 13

Source code:

<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
  <link rel="canonical" href="http://foo.com/">
  <title>Hello, World</title>

  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>

<body>
  <amp-story standalone>
    <amp-story-page id="page0">
      <amp-story-grid-layer template="thirds">
        <div grid-area="lower-third">
          <p>Hello, World</p>
        </div>
      </amp-story-grid-layer>
    </amp-story-page>
  </amp-story>
</body>

</html>

GFI Candidate High Priority Bug stories

Source

ithinkihaveacat

Most helpful comment

I'm sending a fix in #18871 that uses @droob's solution (setting an explicit height) that appears to work. It will likely take a little over a week to make it to production.

Thanks @droob!

newmuis on 22 Oct 2018

🎉4

All 12 comments

Looks like Safari is not respecting grid area names with dashes 👎

newmuis on 14 Feb 2018

@newmuis I'm noticing this in production on stories like https://www.washingtonpost.com/graphics/2018/opinions/amp-stories/ann-telnaes-trump-russia/ with iOS 11.3.1

Are there any updates on this? We've often moved to just using vertical templates

matthewgcallahan on 10 May 2018

👍2

@newmuis our partners production story has also countered the same issue.
Even the official sample (https://graphics.tvbs.com.tw/amp_stories/amp-pets-story/pets-completed.html) would failed for the position layout on the dog's page.
Hope there's any update on this.

Affected version: iOS 11.4

TWsky on 4 Jun 2018

👍1

@newmuis any update on this one?, this bug is really annoying. Thanks

abdelbolanos-cbc on 3 Jul 2018

Let's continue investigating this during the upcoming fixit

newmuis on 4 Jul 2018

This is a high priority issue but it hasn't been updated in awhile. Do you have any updates?

ampprojectbot on 11 Sep 2018

Safari's collapsing the height of amp-story-grid-layer. On the dog layer in the sample, for example, 1fr ends up being the height of the tallest grid section content, which is the <p>. Setting a fixed height for amp-story-grid-layer (or a calculated one, like calc(100% - 100px)) yields the expected results.

droob on 17 Sep 2018

👍1

This is a high priority issue but it hasn't been updated in awhile. Do you have any updates?

ampprojectbot on 16 Oct 2018

This bug is very annoying, I am going to change our stories to prevent use this thirds that Safari breaks.

Safari now

Chrome looks fine

abdelbolanos-cbc on 22 Oct 2018

If anybody is interested I got way to implement something similar to thirds but using CSS and works for Safari.

CSS

     /* Third template fix - thirds require template="horizontal" */
      .thirds {
        padding: 32px;
        top: 0px;
        height: 100%;
        width: 100%;
        position: absolute;
      }
      .thirds > div.upper,  .thirds > div.middle, .thirds > div.lower {
        height: 33%;
      }
      /* End Third template fix */

HTML

        <amp-story-grid-layer template="horizontal"> <!-- template needs to be horizontal -->
        <div> <!-- important don't remove this div -->
            <div class="thirds">
                <div class="upper"> <!-- your content here --> </div>
                <div class="middle"> <!-- your content here --> </div>
                <div class="lower"> <!-- your content here --> </div>
            </div>
        </div>
    </amp-story-grid-layer>

abdelbolanos-cbc on 22 Oct 2018

I'm sending a fix in #18871 that uses @droob's solution (setting an explicit height) that appears to work. It will likely take a little over a week to make it to production.

Thanks @droob!

newmuis on 22 Oct 2018

🎉4

We had to revert the last PR since it was causing breakages to existing publisher stories because grid layers with template="vertical" don't necessarily have to be 100% height.

I'm sending a PR soon to apply 100% height only to thirds and fill.

/cc @newmuis