RESOLVED INVALID 224685
[GTK] Blurry images on various news websites 
https://bugs.webkit.org/show_bug.cgi?id=224685
Summary [GTK] Blurry images on various news websites
Michael Catanzaro
Reported 2021-04-16 12:21:33 PDT
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.
Attachments
Add attachment proposed patch, testcase, etc.
Michael Catanzaro
Comment 1 2021-04-20 12:01:59 PDT
Seems to also affect images in twitter embeds.
Michael Catanzaro
Comment 2 2021-05-12 10:21:52 PDT
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&amp;width=250 250w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=500 500w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=1000 1000w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=1250 1250w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=1500 1500w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=1750 1750w,//i.warbycdn.com/s/c/21f0689060082b07dec5bf388393ec5117c656d7?quality=80&amp;width=2000 2000w">
Michael Catanzaro
Comment 3 2021-05-13 11:08:08 PDT
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.
Michael Catanzaro
Comment 4 2021-05-13 11:14:46 PDT
It's somehow an Epiphany regression.
Michael Catanzaro
Comment 5 2021-05-13 11:33:17 PDT
It's caused by "Port to HdyTabView/HdyTabBar" so not WebKit's fault.
Michael Catanzaro
Comment 6 2021-05-13 11:50:38 PDT
https://gitlab.gnome.org/GNOME/epiphany/-/issues/1532
Note You need to log in before you can comment on or make changes to this bug.