Skip to content

Cast i-amphtml-intrinsic-sizer dimensions to integers to prevent AMP validation errors#4506

Merged
westonruter merged 1 commit intodevelopfrom
workaround/decimal-sizer-dimensions
Apr 2, 2020
Merged

Cast i-amphtml-intrinsic-sizer dimensions to integers to prevent AMP validation errors#4506
westonruter merged 1 commit intodevelopfrom
workaround/decimal-sizer-dimensions

Conversation

@westonruter
Copy link
Copy Markdown
Member

Summary

Until ampproject/amphtml#27528 is resolved, decimal dimensions are not valid in the i-amphtml-intrinsic-sizer element. The quick fix to prevent requiring users to disable the Optimizer is to cast the dimensions to integers.

Note that casting to integers (aka flooring or rounding down) is being done to prevent a situation where two elements 99.5px-wide are displayed inline inside of a container that is 199px wide. If rounding were performed, then the two elements would no longer fit on the same line. This is worse than the alternative when rounding down, which is the presence of a 1px gap.

Note that browsers support sub-pixel rendering, so decimal dimensions are not rounded (at least in Chrome, Safari, and Firefox): https://codepen.io/westonruter/pen/abOxNaq

Fixes #4493

Checklist

  • My pull request is addressing an open issue (please create one otherwise).
  • My code is tested and passes existing tests.
  • My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

@westonruter westonruter added Bug Something isn't working Optimizer labels Apr 1, 2020
@westonruter westonruter added this to the v1.5.2 milestone Apr 1, 2020
@westonruter westonruter requested a review from schlessera April 1, 2020 23:55
@googlebot googlebot added the cla: yes Signed the Google CLA label Apr 1, 2020
@westonruter westonruter force-pushed the workaround/decimal-sizer-dimensions branch from 9defbda to b0c46ac Compare April 2, 2020 00:58
@schlessera
Copy link
Copy Markdown
Collaborator

Why didn't you go with the CSS approach you've proposed here: ampproject/amphtml#27528 (comment) ?

@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Apr 2, 2020

Why didn't you go with the CSS approach you've proposed here: ampproject/amphtml#27528 (comment) ?

@schlessera Because that would break validation. It has to match this pattern:

"data:image\\/svg\\+xml;charset=utf-8,<svg height=\"\\d+\" width=\"\\d+\" xmlns=\"http:\\/\\/www\\.w3\\.org\\/2000\\/svg\" version=\"1\\.1\"\\/>|data:image\\/svg\\+xml;charset=utf-8,<svg height='100' width='300' xmlns='http:\\/\\/www\\.w3\\.org\\/2000\\/svg' version='1\\.1'\\/>"

@schlessera
Copy link
Copy Markdown
Collaborator

Ah, yes, obviously!

@westonruter westonruter merged commit 11b2247 into develop Apr 2, 2020
@westonruter westonruter deleted the workaround/decimal-sizer-dimensions branch April 2, 2020 16:28
@westonruter
Copy link
Copy Markdown
Member Author

Pre-release build for testing: amp.zip (v1.5.2-alpha-20200402T163153Z-b54691494)

@amedina
Copy link
Copy Markdown
Member

amedina commented Apr 3, 2020

QA: Verified that processing of decimal size specifications are parsed and cast properly.

Screen Shot 2020-04-03 at 12 24 44 PM

Screen Shot 2020-04-03 at 12 24 35 PM

Screen Shot 2020-04-03 at 12 26 55 PM

westonruter added a commit that referenced this pull request Apr 3, 2020
* tag '1.5.2':
  Bump 1.5.2
  Bump version to 1.5.1-RC1
  Cache response status and headers when fetching external stylesheets (#4509)
  Fix securing multi-line mustache templates (#4521)
  Add CSS monitoring time series to Site Health debugging info (#4519)
  Update hostname used for WordPress TV embeds to fix external HTTP requests (#4524)
  Fix processing of element child sanitization loop when invalid elements are replaced with children (#4512)
  Account for more YouTube URL formats (#4508)
  Update selected featured image ID on select (#4453)
  Raise default threshold for disabling CSS caching (#4513)
  Cast i-amphtml-intrinsic-sizer dimensions to integers (#4506)
  Only move meta tags to the head when required and add processing for meta[http-equiv] (#4505)
  Fix failing tests (#4507)
  Bump 1.5.2-alpha
@schlessera schlessera added the WS:Perf Work stream for Metrics, Performance and Optimizer label Aug 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Bug Something isn't working cla: yes Signed the Google CLA Optimizer WS:Perf Work stream for Metrics, Performance and Optimizer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image with decimal dimensions causes Optimizer to emit AMP Validation error

4 participants