Problem using AmpProject.org

I have just started using http://ampproject.org and foolishly only tested using FireFox. I managed to add the required header information and replaced all <img … references with <amp-img … then cached the dynamic page for future use.

I now discover that images ONLY display if the img width and height are hard-coded. It seems that setting a style to “width:88%; max-width:888px;” does not work with desktop Opera and Chrome although the page does render OK using an iPad Mini 2.

Ironically both desktop Chrome and Opera browsers show the images when using their Debuggers!

A typical page where the width and height are not explicitly set:

http://www.johns-jokes.com/downloads/sp-f/jb-granny-goes-a-visiting

Has anyone had any success globally converting pages? I dread to think I have to manually amend each and every page, there are thousands :frowning:

Edit:
Copied URL to a temporary directory so that I can experiment with trying to eliminate the problem on the actual page.

Very odd.

Chrome had a “getClientRect” error. but as you said, the images showed in the dev tool.

Then when I closed dev tools, the page displayed the images - until I refreshed the page.

Doubtful, but maybe giving them position top / left would be enough ?

EDIT
Hmmm, maybe layout="responsive"

1 Like

The site is very old and I have made numerous changes and upgrades as and where required.

If the list of items shown below is not allowed it looks as though I will have to go through each page individually.

I should have read the manual before starting :frowning:

Disallowed and/or Banned styles

Inline style attributes
      All styles must be defined in the <head> of the page,
      	within a <style amp-custom> tag.

!important qualifier 
      Usage is not allowed.
      This is a necessary requirement to enable AMP to enforce its element sizing rules.
    
<link rel=”stylesheet”>
      Disallowed with the exception of custom fonts.

* (universal selector)
      Negative performance implications and could be used
      to circumvent other selector restrictions.
    
:not()
      Could be used to simulate the universal selector.
    
      Pseudo-selectors, pseudo-classes, and pseudo-elements
      Pseudo-selectors, pseudo-classes and pseudo-elements are only allowed
      in selectors that contain tag names and those tag names must not start with amp-.
      Example OK: a:hover, div:last-of-type
      Example not OK: amp-img:hover, amp-img:last-of-type
        
-amp- class and i-amp- tag names
      Class names, in author stylesheets, may not start with the string -amp-.
 These are reserved for internal use by the AMP runtime. It follows, 
that the user's stylesheet may not reference CSS selectors for -amp- classes and i-amp tags.
        
behavior, -moz-binding
      These properties are not allowed
      for security reasons.
        
filter
      Blacklisted due to performance concerns.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.