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.
errors in Firefox
See original GitHub issuewe 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?
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
@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 …
This appears to be a difference in the rendering output from Chromium and Gecko based browsers.
The
<template>element is specifying thewidthandheightof the SVG Element, as seen here:This would be supplied by the inline AMP State, if it contained the values.
But, as you can see,
widthandheightare actually properties of the 0th and 1st items in theitemsarray. 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.
The same is happening in Chromium based browsers.
However, this is where the difference in rendering output occurs.
Chromium based browsers inherit the height of the SVG from the surrounding
amp-listElement.Whereas, Gecko based browsers do not.
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.