Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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):

Expected (stable Safari):

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>

Issue Analytics

State:
Created 6 years ago
Comments:12 (6 by maintainers)

Top GitHub Comments

4reactions

newmuiscommented, Oct 22, 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!

2reactions

matthewgcallahancommented, May 10, 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

Top Results From Across the Web

Documentation: <amp-story-grid-layer> - amp.dev

The thirds template divides the screen into three equally-sized rows, and allows you to slot content into each area. Named Areas: upper-third; middle-third...

Grid areas are not positioning as defined in grid-template-areas

Areas defined in grid-template-areas should be continuous. One option is to create two separate areas: #maincontainer { display: grid ...

grid-area - CSS: Cascading Style Sheets - MDN Web Docs

The grid-area CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, ...

Positioning elements with Grid - Dawntraoz

display - specifies the type of rendering box of an element. · grid-template - a shorthand property for defining grid columns, rows, and...

Understanding CSS Grid: Grid Template Areas

So the following CSS would place an item grid-row-start: 3 with all other values set to auto, therefore, the item would be auto-placed...