Bug 224685

Summary: [GTK] Blurry images on various news websites
Product: WebKit Reporter: Michael Catanzaro <mcatanzaro>
Component: WebKitGTKAssignee: Nobody <webkit-unassigned>
Status: RESOLVED INVALID    
Severity: Normal CC: bugs-noreply, mcatanzaro
Priority: P2    
Version: WebKit Nightly Build   
Hardware: PC   
OS: Linux   

Description Michael Catanzaro 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.
Comment 1 Michael Catanzaro 2021-04-20 12:01:59 PDT 
Seems to also affect images in twitter embeds.
Comment 2 Michael Catanzaro 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">
Comment 3 Michael Catanzaro 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.
Comment 4 Michael Catanzaro 2021-05-13 11:14:46 PDT 
It's somehow an Epiphany regression.
Comment 5 Michael Catanzaro 2021-05-13 11:33:17 PDT 
It's caused by "Port to HdyTabView/HdyTabBar" so not WebKit's fault.
Comment 6 Michael Catanzaro 2021-05-13 11:50:38 PDT 
https://gitlab.gnome.org/GNOME/epiphany/-/issues/1532