question-mark
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.

Changing attributes e.g `aspect ratio` breaks images in amp-mode.

See original GitHub issue

Steps to reproduce:

  1. Create an AMP page inside the editor.
  2. Add an image with desired ratio and other attributes.
  3. Save page.
  4. Edit image attributes such as aspect ratio.

No images will be visible and the following error shows up in the console:

Uncaught Error: The last option must not have a media condition​​​
    at Za.f.assert (log.js:429)
    at D (log.js:995)
    at new mi (size-list.js:167)
    at li (size-list.js:136)
    at HTMLElement.Di.b.applySizesAndMediaQuery (custom-element.js:680)
    at ci.f.applySizesAndMediaQuery (resource.js:374)
    at h (resources-impl.js:1173)
    at yj.setState (finite-state-machine.js:72)
    at Cj.f.doPass (resources-impl.js:743)
    at ji.Ug (resources-impl.js:134)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
homanpcommented, Apr 22, 2020

@mrkoreye so I figured out that this only happens in amp-mode when you put an image inside a box. Not otherwise.

0reactions
mrkoreyecommented, Apr 21, 2020

Thanks, that should help! I will let you know if I need anything else to investigate.

Read more comments on GitHub >

github_iconTop Results From Across the Web

aspect-ratio - CSS: Cascading Style Sheets - MDN Web Docs
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and...
Read more >
Avoiding <img> layout shifts: aspect-ratio vs width & height ...
A slight issue in Firefox​​ In this case, the two images have different aspect ratios. Chrome and Safari use the correct width and...
Read more >
A more elegant and easier to use solution · Issue #16 - GitHub
This will calculate an aspect ratio, based on the width & height attributes — before the image has loaded — and have that...
Read more >
How to maintain aspect ratio using HTML IMG tag
I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes...
Read more >
aspect-ratio - CSS-Tricks
It requires both properties to override aspect-ratio ; setting either height or width alone will not break the element's aspect ratio.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found