Photon: IE11 srcset issue causes tiny images when post is written in classic editor

[ShawnMichaelSmalley]

1. Author a post using the classic editor (not Gutenberg, not Gutenberg Ramp-enabled and not the "classic block" inserted into a page) or edit a post that was already built using the classic editor
2. Insert a large (>980px) image among the copy and leave set to full size
3. Save and view in a "modern" browser
4. Compare to how it appears in IE11 and notice that the image is <=100px

Workarounds: Enable Gutenberg and then convert the post into Gutenberg blocks, or disable Proton

What I expected

I have a few blog posts (1, 2, 3, 4) which was written using the classic editor. Images are placed inline with text and left to "full size" in the image details. When viewed on a browser that supports srcset the images appear fine and appropriately fills up the post container.

What happened instead

However, when viewed on IE11 it does not. It appears to use a fallback image size that is 99px inline width. Disabling Proton remedies the issue.

I initially thought it might be #9833 but the markup and scenarios are slightly different (but are perhaps related). I also investigated Gutenberg pull #9421 and Gutenberg issue #11603. Could still be related to closed issue #3080 regarding portfolio images returning the "requested size" instead of the actual size, and maybe a combination of #9833 ?

These issues do not occur for any posts written using Gutenberg or the classic block entered into a new post. However, if I edit an old post that was written using the classic editor and insert a Gutenberg image block above it that image will break in the same fashion. I've also tried using Gutenberg Ramp and authoring a new post, but those images appear fine as well. Also, if you convert a post into Gutenberg blocks it works fine. This only affects posts still containing a classic editor "leftover".

Normally, I'd just chalk this up to "upgrade to Edge or use another browser", but this client markets primarily to older readers and IE makes up nearly 40% of their page views. I've left Proton enabled on this staging URL but have it disabled on our production site for the time being until we can recreate all posts using Gutenberg. We can leave the staging link up if needed for investigation.

Screenshots
A view of the settings from within the post:

How the post appears in Chrome:

How the post appears in IE11:

[jeherve]

Does this happen regardless of the theme? I'm especially interested in tests with themes that define a custom $content_width.

Could you also paste the HTML markup for one of the images as you get it in the HTML view in the post editor?

Thank you!

[ShawnMichaelSmalley]

This theme is a child theme of one called "Travel Gem". It inherits the $content_width from its parent. Below is the parent theme's settings:

I switched the staging site to Twenty Nineteen and the issue did not resolve, so it's not specific to this theme family. I've left the staging site up on Twenty Nineteen for now, but I'll have to roll it back the next time I'm staging theme changes. I won't touch posts though if I can help it. I've been primarily using this one for troubleshooting (though I've linked to a few examples in my OP):
https://rkblogstaging.wpengine.com/2019-ncaa-march-madness-hotel-guide

Below is the HTML from one of the "bad" images when rendered in IE11:
<img width="99" height="51" class="wp-image-698 size-full alignright" alt="March Madness Hotels in Dayton Ohio" src="https://i1.wp.com/rkblogstaging.wpengine.com/wp-content/uploads/2019/02/58-1.jpg?w=100%25&amp;ssl=1" sizes="(max-width: 980px) 100vw, 980px" srcset="https://i1.wp.com/rkblogstaging.wpengine.com/wp-content/uploads/2019/02/58-1.jpg?w=980&amp;ssl=1 980w, https://i1.wp.com/rkblogstaging.wpengine.com/wp-content/uploads/2019/02/58-1.jpg?resize=300%2C153&amp;ssl=1 300w, https://i1.wp.com/rkblogstaging.wpengine.com/wp-content/uploads/2019/02/58-1.jpg?resize=768%2C392&amp;ssl=1 768w">

Here's what that same code looks like when editing the post as HTML from within the classic editor:
<p><img class="wp-image-698 size-full alignright" src="https://rkblogstaging.wpengine.com/wp-content/uploads/2019/02/58-1.jpg" alt="March Madness Hotels in Dayton Ohio" width="100%" height="500" /></p>

I notice the inline width of 100% even though a manual width has not been set (just left at "Full Size" which is 980px). Percentages in inline widths aren't valid HTML5 anymore, so that could be causing some problems if Photon expects something different.

[jeherve]

I notice the inline width of 100%

This is odd indeed, and as you found out yesterday with #9833, Photon does not cope well with that. It's also not something WordPress does out of the box as far as I know. Could you try to deactivate all other plugins, one at a time, and try to insert a new image between each deactivation, to see if that 100% is added by a specific plugin?

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[kraftbj]

We will be deprecating IE 11 support this summer and thus are wontfix'ing IE 11 issues now. See p1HpG7-c8n-p2