During a recent project I found an issue with images being shown very small when viewing a web page in IE10/11, this happened when the page was built in AMP with images being loaded with the AMP-IMG component.
E.g. Notice the small image floated right:
The project was built with WordPress, and uses the official WordPress AMP plugin. At first I though this was an issue coming from the plugin, but it still happened when I used the same code examples from the AMP image component docs.
A couple of other users have experienced this issue on GitHub, but there was no proposed solution.
The solution I have found is quite 'hacky', but is the only way I have managed to solve this issue. This solution involves using '!important' tags (a necessary evil) to override the AMP-IMG default styles, a media query is used to target IE10/11.
Example with the new fix:
This is the markup used for the image: (Placeholder images have been used)
<div class="wp-block-image">
<figure class="alignright">
<amp-img src="http://placekitten.com/300/200" alt=""
class="amp-wp-enforced-sizes"
srcSet="http://placekitten.com/300/200 300w, http://placekitten.com/150/100 150w, http://placekitten.com/165/110 165w, http://placekitten.com/360/240 360w"
width="300" height="200" layout="intrinsic"></amp-img>
</figure>
</div>
CSS Fix
There are two ways this can be implemented, either with standard CSS syntax or with SASS.
Standard CSS
<style amp-custom>
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/*Standard CSS format:*/
.wp-block-image figure:not(.alignwide):not(.alignfull) {
max-width:100%!important;
overflow: hidden!important;
}
/*Causes issue - not valid amp, cannot use this name*/
/*
.wp-block-image figure:not(.alignwide):not(.alignfull) amp-img .i-amphtml-intrinsic-sizer {
max-height:1px!important;
overflow: hidden!important;
visibility: hidden!important;
}
*/
.wp-block-image figure:not(.alignwide):not(.alignfull) amp-img img {
width: auto!important;
height: auto!important;
min-width: 0!important;
min-height: 0!important;
max-width: 100%!important;
max-height: 100%!important;
position: relative!important;
margin-top:-25px!important; /*This fixes the issue with 'i-amphtml-sizer'*/
}
}
</style>
SASS
<style amp-custom>
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
//SASS Format:
.wp-block-image {
figure:not(.alignwide):not(.alignfull) {
max-width:100%!important;
overflow: hidden!important;
amp-img {
//Causes issue - not valid amp, cannot use this name
/*
i-amphtml-sizer,
.i-amphtml-intrinsic-sizer {
max-height:1px!important;
overflow: hidden!important;
visibility: hidden!important;
}
*/
img {
width: auto!important;
height: auto!important;
min-width: 0!important;
min-height: 0!important;
max-width: 100%!important;
max-height: 100%!important;
position: relative!important;
margin-top:-25px!important; //This fixes the issue with 'i-amphtml-sizer'
}
}
}
}
}
</style>
Full code
If you're having trouble, you can view the full code below, or a Pen on Codepen: https://codepen.io/ryanfitton/pen/PoYpeWp
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<title>Intrinisc Image Test</title>
<link rel="canonical" href="https://codepen.io/ryanfitton/pen/VwZpQVx">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/*
Default WordPress CSS classes - https://codex.wordpress.org/CSS
*/
.alignnone {
margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 5px auto 5px auto;
}
.alignright {
float:right;
margin: 5px 0 20px 20px;
}
.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.alignright {
float: right;
margin: 5px 0 20px 20px;
}
a img.alignnone {
margin: 5px 20px 20px 0;
}
a img.alignleft {
float: left;
margin: 5px 20px 20px 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 1px solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 5px 3px 10px;
text-align: center;
}
.wp-caption.alignnone {
margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
margin: 5px 0 20px 20px;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/*
Default CSS from AMP WP plugin - https://github.com/ampproject/amp-wp/blob/develop/assets/css/src/amp-default.css. THis would be automatically added by the WP AMP plugin: https://en-gb.wordpress.org/plugins/amp/
*/
amp-img.amp-wp-enforced-sizes[layout="intrinsic"] > img,
amp-anim.amp-wp-enforced-sizes[layout="intrinsic"] > img {
object-fit: contain;
}
amp-fit-text blockquote,
amp-fit-text h1,
amp-fit-text h2,
amp-fit-text h3,
amp-fit-text h4,
amp-fit-text h5,
amp-fit-text h6 {
font-size: inherit;
}
/**
* Override a style rule in Twenty Sixteen and Twenty Seventeen.
* It set display:none for audio elements.
* This selector is the same, though it adds body and uses amp-audio instead of audio.
*/
body amp-audio:not([controls]) {
display: inline-block;
height: auto;
}
/*
* Style the default template messages for submit-success, submit-error, and submitting. These elements are inserted
* by the form sanitizer when a POST form lacks the action-xhr attribute.
*/
.amp-wp-default-form-message > p {
margin: 1em 0;
padding: 0.5em;
}
.amp-wp-default-form-message[submitting] > p,
.amp-wp-default-form-message[submit-success] > p.amp-wp-form-redirecting {
font-style: italic;
}
.amp-wp-default-form-message[submit-success] > p:not(.amp-wp-form-redirecting) {
border: solid 1px #008000;
background-color: #90ee90;
color: #000;
}
.amp-wp-default-form-message[submit-error] > p {
border: solid 1px #f00;
background-color: #ffb6c1;
color: #000;
}
/* Prevent showing empty success message in the case of an AMP-Redirect-To response header. */
.amp-wp-default-form-message[submit-success] > p:empty {
display: none;
}
/*
* WordPress Image Intrinsic layout fix (IE 10 and 11)
*
* Fixes an issue with the WordPress AMP plugin converting all images which are not 'alignwide' or '.alignfull' to an Intrinsic layout
*
* More info:
* - Same issue: https://github.com/ampproject/amphtml/issues/18652
* - https://github.com/ampproject/amphtml/issues/17635
* - https://github.com/ampproject/amphtml/issues/17652
*
*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
/*Standard CSS format:*/
.wp-block-image figure:not(.alignwide):not(.alignfull) {
max-width:100%!important;
overflow: hidden!important;
}
/*Causes issue - not valid amp, cannot use this name*/
/*
.wp-block-image figure:not(.alignwide):not(.alignfull) amp-img .i-amphtml-intrinsic-sizer {
max-height:1px!important;
overflow: hidden!important;
visibility: hidden!important;
}
*/
.wp-block-image figure:not(.alignwide):not(.alignfull) amp-img img {
width: auto!important;
height: auto!important;
min-width: 0!important;
min-height: 0!important;
max-width: 100%!important;
max-height: 100%!important;
position: relative!important;
margin-top:-25px!important; /*This fixes the issue with 'i-amphtml-sizer'*/
}
}
</style>
</head>
<body>
<div class="wp-block-image">
<figure class="alignright">
<amp-img src="https://placekitten.com/300/200" alt="" class="amp-wp-enforced-sizes"
srcSet="https://placekitten.com/300/200 300w, https://placekitten.com/150/100 150w, http://placekitten.com/165/110 165w, https://placekitten.com/360/240 360w"
width="300" height="200" layout="intrinsic"></amp-img>
</figure>
</div>
<h1>WordPress Image Intrinsic layout fix (IE 10 and 11)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus et erat eleifend fermentum. Nulla eget
efficitur libero, eu molestie massa. Donec mauris justo, dignissim in efficitur ac, dictum rutrum sem. Nulla est
neque,
maximus a leo non, pretium iaculis nisi. Morbi auctor ante mollis, scelerisque sem vel, congue felis. Integer
eleifend
erat nec metus gravida finibus. Nunc sed porta mi, nec elementum dolor.</p>
<p>Donec purus dolor, pellentesque eu eleifend malesuada, faucibus sed arcu. Aliquam velit erat, imperdiet sed sagittis
tincidunt, laoreet non arcu. Curabitur et dui porttitor, luctus est in, tincidunt tortor. Mauris scelerisque, ligula
ac
dapibus convallis, risus est posuere risus, in rhoncus felis nibh ac erat. Etiam sit amet nisi vitae ligula varius
dictum. Donec porttitor diam et justo lacinia maximus. Suspendisse ornare feugiat orci, quis venenatis urna
scelerisque
id. Morbi mattis ante et tempor commodo. Nunc nec massa molestie tellus congue fermentum. Donec pellentesque porta
mauris ut laoreet. In quis est commodo, malesuada risus placerat, iaculis risus.</p>
<p>Morbi tincidunt elit vulputate risus faucibus molestie. Maecenas ut porta tellus. Quisque dui risus, gravida id sem
in,
tempor volutpat metus. Cras quis mattis nibh. Integer sit amet massa vitae odio vulputate scelerisque. Quisque
convallis
felis et dolor mattis, a faucibus ex sagittis. Mauris laoreet, neque eu convallis lobortis, justo mauris tincidunt
arcu,
non condimentum metus mauris tincidunt turpis. Vivamus quis lacinia magna. Suspendisse dictum elit sit amet massa
ultricies, in volutpat erat malesuada. Integer enim mauris, vehicula quis libero sit amet, sollicitudin volutpat
urna.</p>
</body>
</html>