Amphtml: errors in Firefox

Created on 6 Jan 2021 · 11Comments · Source: ampproject/amphtml

we have a valid page featuring a deep SVG where labels are set using amp-list. Works fine Chrome, but we see these errors in FF (84.0.1)

for:
-moz-text-size-adjust
-webkit-text-size-adjust

we see:
Error in parsing value for ‘-webkit-text-size-adjust’. Declaration dropped. index.html:1:237 Elements matching selector: body NodeList(1) 0: <body class="amp-mode-mouse" style="opacity: 1; visibility: …rmal none running none;" data-new-gr-c-s-check-loaded="8.867.0"> length: 1 <prototype>: NodeListPrototype

and

Unknown property ‘text-size-adjust’. Declaration dropped. index.html:1:312 Elements matching selector: body NodeList(1) 0: <body class="amp-mode-mouse" style="opacity: 1; visibility: …rmal none running none;" data-new-gr-c-s-check-loaded="8.867.0"> length: 1 <prototype>: NodeListPrototype

also:

Unrecognized at-rule or error parsing at-rule ‘@-ms-keyframes’
Unrecognized at-rule or error parsing at-rule ‘@-o-keyframes’.

and

Ruleset ignored due to bad selector. html.i-amphtml-singledoc.i-amphtml-embedded { -ms-touch-action:pan-y; touch-action:pan-y }

any thoughts about what's happening with the amp runtime and Firefox?

Bug

Source

jaygray0919

All 11 comments

Can you provide an example URL?

kristoferbaxter on 6 Jan 2021

Sure: https://afdsi.com/flavonoids/

jaygray0919 on 6 Jan 2021

Apologies, was not able to reproduce. Are there additional steps?

Screen Shot 2021-01-06 at 1 52 27 PM

kristoferbaxter on 6 Jan 2021

compare it with chrome and you'll see the problem. also check the FF console

jaygray0919 on 7 Jan 2021

@kristoferbaxter anything more i should do to help here?

jaygray0919 on 7 Jan 2021

I see the issue now (previously had the "CSS" option unchecked. Taking a look.

kristoferbaxter on 7 Jan 2021

👍1

Note: the URL works on Edge, as on Chrome. The problem seems to be FF specific.

jaygray0919 on 7 Jan 2021

This appears to be a difference in the rendering output from Chromium and Gecko based browsers.

The <template> element is specifying the width and height of the SVG Element, as seen here:
Screen Shot 2021-01-07 at 12 18 27 PM

This would be supplied by the inline AMP State, if it contained the values.
Screen Shot 2021-01-07 at 12 20 15 PM

But, as you can see, width and height are actually properties of the 0th and 1st items in the items array. So the template when rendered by mustache generates empty attributes for these attributes in the updated DOM.

These empty values are flagged as invalid by Firefox, and the declarations dropped.

Screen Shot 2021-01-07 at 12 21 56 PM

The same is happening in Chromium based browsers.

Screen Shot 2021-01-07 at 12 22 50 PM

However, this is where the difference in rendering output occurs.

Chromium based browsers inherit the height of the SVG from the surrounding amp-list Element.
Screen Shot 2021-01-07 at 12 24 08 PM

Whereas, Gecko based browsers do not.
Screen Shot 2021-01-07 at 12 25 45 PM

Options for remedying

If the value of the height and width is intended to be passed into the <amp-mustache> render, it needs to be specified differently in the <amp-state> object.
specify a 100% width and height via CSS.

kristoferbaxter on 7 Jan 2021

👍1

Hopefully this was helpful, I'm going to close this issue as it appears to be working as intended.

kristoferbaxter on 7 Jan 2021

@kristoferbaxter thank you for the excellent analysis and detail. i see how to fix this. will also bookmark the process as i see similar problems but did not know how to determine root cause. thanks again ...

jaygray0919 on 7 Jan 2021

👍1

Was this page helpful?

0 / 5 - 0 ratings