On page image not centered 100vw issue

Hi, I have noticed that when smaller images are used in the page content; and set to be center aligned do not center align. This happens for example when viewing with 640x360x viewport and others.

It would appear this is the problem “100vw” within the style of an image. Remove a ‘v’ or a ‘w’ from this setting seems to resolve the issue.

Here’s a code example:

<div id="attachment_10298" class="wp-caption aligncenter amp-wp-inline-ad925cc1b1f15b9e578d0bdbbf9c63cd"><a href="https://www.sheilds.org/nebosh/"><amp-img class="amp-img wp-image-10298 size-full i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" src="https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px.png" alt="NEBOSH accredited center 548" width="500" height="200" srcset="https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px.png 500w, https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-300x120.png 300w, https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-450x180.png 450w" sizes="(max-width: 500px) 100vw, 500px" style="width: 100vw;"><i-amphtml-sizer style="display: block; padding-top: 40%;"></i-amphtml-sizer><img alt="NEBOSH accredited center 548" class="i-amphtml-fill-content i-amphtml-replaced-content" src="https://www.sheilds.org/wp-content/uploads/2015/01/nebosh-acc11-500px-450x180.png"></amp-img></a><p class="wp-caption-text">Show all NEBOSH courses</p></div>

You’ll notice in two places ‘100vw’ is used.

In a style tag:

style="width: 100vw;"

and within a sizes tag:

sizes="(max-width: 500px) 100vw, 500px"

Files which have this setting are:

• wp-content/plugins/accelerated-mobile-pages/includes/vendor/amp/includes/sanitizers/class-amp-base-sanitizer.php line 85
• As a comment in wp-content/plugins/accelerated-mobile-pages/includes/vendor/amp/templates/style.php line 31
• As a comment in accelerated-mobile-pages\includes\vendor\amp\back-compat\templates-v0-3\style.php line 54

I’ve tried editing these files, but struggling with the issue still. Any chance of a fix for this?

Some additional things I notice:

The not quite center align issue only happens when images are relatively small, say a few hundred pixels in width. If a larger image is used this doesn’t appear to be an issue and the image is centered.

The issue doesn’t happen when rotating the viewport; and the image in centered.

I have additional css rules to align center images with attachments and captions properly – these rules are not interfering at all with the generated code from accelerated mobile pages plugin; I removed my custom rules and the problem still occurred.

Any help would be appreciated, but appears to be a bug.

Thanks

The page I need help with: [log in to see the link]