Images are sometimes fuzzy and sad on various news websites, e.g. https://www.vox.com/future-perfect/22385612/plant-based-meat-milk-alternative-protein. To reproduce, you must open the link in a new tab and wait for the page to load in that tab. Don't switch to the new tab until the page is loaded. The image will be very blurry, but only if you wait for the page to load before visiting the new tab. So don't visit the page directly, because the bug won't happen if you do. Good case: the image displayed is https://cdn.vox-cdn.com/thumbor/7DKI3N1-Ra3UaohynBbgF0nXv1A=/0x0:5624x3621/1570x883/filters:focal(1050x760:1948x1658):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/69136028/GettyImages_1183778224.0.jpg. Note the size 1050x760. Bad case: the image displayed is https://cdn.vox-cdn.com/thumbor/tIAt7KSHnXblaMYwWtmFhsu2Zbw=/0x0:5624x3621/320x180/filters:focal(1050x760:1948x1658):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/69136028/GettyImages_1183778224.0.jpg. Note the size 320x180. Because the issue does not occur when the page is loaded in an existing tab, I suspect we may be messing up the viewport size somehow.
Seems to also affect images in twitter embeds.
This seems to be breaking a wide variety of websites. For example, same problem occurs here: https://www.warbyparker.com/eyeglasses/men/hayden/striped-pacific In this case, the image looks like this: <img class="c-product-slide--product-image__image" alt="Angle of Hayden in Striped Pacific" sizes="100vw" srcset="//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=250 250w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=500 500w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=1000 1000w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=1250 1250w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=1500 1500w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=1750 1750w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&width=2000 2000w">
OK it's really simple. The window size is indeed set incorrectly. This script reproduces the bug: <body> <p><a id="link">New tab!</a></p> </body> <script> var p = document.createElement("P"); var t = document.createTextNode(`width=${window.innerWidth}`); p.appendChild(t); document.body.appendChild(p); document.getElementById("link").href = document.URL; </script> Load it in an open window and it will print the window width. Open it in a new tab and quickly switch to the new tab, and it will print the window width. Open it in a new tab and allow the tab to load in the background, and it will print 0.
It's somehow an Epiphany regression.
It's caused by "Port to HdyTabView/HdyTabBar" so not WebKit's fault.
https://gitlab.gnome.org/GNOME/epiphany/-/issues/1532