224685 2021-04-16 12:21:33 -0700 [GTK] Blurry images on various news websites 2021-05-13 11:50:38 -0700 1 1 1 Unclassified WebKit WebKitGTK WebKit Nightly Build PC Linux RESOLVED INVALID P2 Normal --- 1 mcatanzaro webkit-unassigned bugs-noreply mcatanzaro oldest_to_newest 1751182 0 mcatanzaro 2021-04-16 12:21:33 -0700 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. 1752366 1 mcatanzaro 2021-04-20 12:01:59 -0700 Seems to also affect images in twitter embeds. 1759290 2 mcatanzaro 2021-05-12 10:21:52 -0700 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"> 1759750 3 mcatanzaro 2021-05-13 11:08:08 -0700 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. 1759755 4 mcatanzaro 2021-05-13 11:14:46 -0700 It's somehow an Epiphany regression. 1759763 5 mcatanzaro 2021-05-13 11:33:17 -0700 It's caused by "Port to HdyTabView/HdyTabBar" so not WebKit's fault. 1759767 6 mcatanzaro 2021-05-13 11:50:38 -0700 https://gitlab.gnome.org/GNOME/epiphany/-/issues/1532