#167 – Safari, Firefox, and Chrome

Weeblramp is stripping classes differently on Chrome, Firefox, and Safari.

In the inspector on this page (in all three browsers): https://wdwprepschool.com/amp

In Chrome: search for "home-card" and "home-cards". You'll see only "home-cards" on the <section> element, but no "home-card" classes.

In Firefox and Safari: search for "home-card" and "home-cards". You'll see only "home-card" on a child <div> element, but no "home-cards" class on the parent <section> element (like you see in Chrome).

This is a huge setback because it means we have to check every single browser to make sure changes are getting applied appropriately. Sometimes, if you target the parent element versus the child element, the CSS rules don't apply without adding "!important" which isn't allowed in this plugin's custom CSS, so we effectively have to rewrite many rules (leading to double the work).

We are using Elementor, and we've checked the "Elementor" integration box in the appropriate settings page.

PLEASE HELP!

Hi

weeblrAMP does not strip CSS classes. It's only concerned with the HTML element themselves, whether they are allowed by the AMP specification or not. But AMP does not have any rule on CSS classes (or element ids) and so we don't even look at them.

In addition, weeblrAMP runs on the server is not aware of whether the current page request has been made by Chrome, Firefox or something else (it's possible we just do not have any code that targets a specific browser as we do not have any need for that).

In Chrome: search for "home-card" and "home-cards". You'll see only "home-cards" on the <section> element, but no "home-card" classes.



In Firefox and Safari: search for "home-card" and "home-cards". You'll see only "home-card" on a child <div> element, but no "home-cards" class on the parent <section> element (like you see in Chrome).

That's not what I see: if you look up the page source code for your home page and your AMP home page, neither of them contains the "home-cards" class.

I would think that class is added in javascript by Elementor (or your theme ) when the page is being rendered by the browser. Of course, as no javascript is allowed on AMP pages, the code to add the home-cards class does not exist on the AMP version and so the class is missing.

Source code of your regular home page in chrome has no home-cards class:



Source code of your regular home page in Firefox has no home-cards either:



The page content coming from the server is actually pretty much the same whether in Chrome or Firefox. I could spot a difference though: your "searchiq" plugin loads a couple of css files on firefox that it does not on chrome. That's pretty odd but nothing related to the home-card/cards question:



[EDIT] After doing all this, I also thought about looking at the rendered page, using the Chrome Dev tools and I actually don't see any home-cards class either on your regular home page, either with Chrome or Firefox.

Note:

the CSS rules don't apply without adding "!important" which isn't allowed in this plugin's custom CSS

It's not the plugin which does not allow using !important, it's the AMP specification. If you were to force using !important by manually adding it with templates overrides or such, you would render your AMP pages invalid right away.

Best regards