Page MenuHomePhabricator

Pixelated images in PDF rendering.
Closed, ResolvedPublic

Assigned To
Authored By
TheDJ
Oct 20 2017, 9:22 AM
Referenced Files
F18639647: Screen Shot 2018-05-31 at 3.38.09 PM.png
May 31 2018, 10:39 PM
F12643935: Screen Shot 2018-01-18 at 11.34.54 AM.png
Jan 18 2018, 7:35 PM
F12643905: image.png
Jan 18 2018, 7:35 PM
F12643909: image.png
Jan 18 2018, 7:35 PM
F12643924: Screen Shot 2018-01-18 at 11.33.35 AM.png
Jan 18 2018, 7:35 PM
F12643937: image.png
Jan 18 2018, 7:35 PM
F12643931: image.png
Jan 18 2018, 7:35 PM
F11131710: image.png
Dec 2 2017, 12:48 AM

Description

The resolution of the images included is pixelated and the images seem inflated, especially noticeable for smaller images like SVG icons etc.

Screen Shot 2017-10-20 at 11.04.24.png (322×532 px, 53 KB)

This is probably a dpi mismatch (SVGs shouldn't have a limit on how large they can be rendered by design).

PDF from: https://en.wikipedia.org/wiki/en:Template:Tsuen%20Wan%20Line%20RDT
Reported at: https://www.mediawiki.org/wiki/Topic:U08at90ido2loj5q

Reproduction criteria

  • for a number of browsers and operating systems, test whether images appear pixelated using:
    • the browser print
    • download as PDF (Electron)
  • if time, perform exploratory testing to identify other articles with the bug
  • provide screenshots of each instance the bug appears

Event Timeline

This seems reproducible across most browsers. Download as PDF on Chrome looked the most 'crisp' to me.

Mac 10 Chrome 62
Browser PrintDownload as PDF
image.png (1,366×768 px, 163 KB)
image.png (1,366×768 px, 176 KB)
Mac 11 Firefox 57
image.png (1,366×768 px, 148 KB)
image.png (1,366×768 px, 163 KB)
Mac 10 Safari 11
image.png (1,366×768 px, 147 KB)
image.png (1,366×768 px, 163 KB)
Windows 10 Edge 14
image.png (1,366×768 px, 105 KB)
image.png (1,366×768 px, 125 KB)
Windows 10 Chrome 62
image.png (1,366×768 px, 169 KB)
image.png (1,366×768 px, 160 KB)
Jdlrobson subscribed.

@ABorbaWMF could you take a look and see if the fix for T181138 also fixed this?

Took a quick look at this one. I am seeing roughly the same results. The images are a bit fuzzy.

PrintPDF
image.png (1,366×768 px, 139 KB)
image.png (1,366×768 px, 137 KB)
Screen Shot 2018-01-18 at 11.33.35 AM.png (2,880×1,800 px, 1 MB)
image.png (1,366×768 px, 137 KB)
Screen Shot 2018-01-18 at 11.34.54 AM.png (2,880×1,800 px, 1 MB)
image.png (1,366×768 px, 137 KB)

Did you check staging or beta cluster? The change is NOT live on production yet but will be later today.

Sorry for not making that clear :(

@Jdlrobson, ok that makes sense. @ovasileva and I thought the change had already pushed. I'll take another look later today.

That was my bad. For future reference - when does the train go out on thursday roughly?

@pmiazga - is there any way we can test this in Chromium?

Looks good now on production on Chrome. Also tested on Beta with a few articles. Looks good

Screen Shot 2018-05-31 at 3.38.09 PM.png (560×1,264 px, 127 KB)

Looks good now on production on Chrome. Also tested on Beta with a few articles. Looks good

Screen Shot 2018-05-31 at 3.38.09 PM.png (560×1,264 px, 127 KB)

Hi @ABorbaWMF - interesting - this should still be an issue in production (which still has the Electron renderer). The Chromium renderer is only available on the beta cluster.

The image – if from Chromium – seems a bit problematic. One of the images is still clearly incorrectly aligned, the one in the Lai King row. This is worrying, because it might mean that the new software is incorrectly rounding the image widths. (The gap between that image and the other images in the row is an empty table cell with a set width.) Several of the images (the corner pieces for the 45° tracks) did not render at all, and many of the ones which did render appear to be quite distorted (the circles should be round, and the curves in the second-last row should be smooth). I can't tell why.

Obviously, these are not problems for most images, but it would be nice if they could be fixed (if they're problems with the renderer). These diagrams are used on more than ten thousand pages across WMF wikis.

In addition, the colours being stripped makes the interchange boxes useless, and the background colour being stripped makes the fade overlays look incorrect because IIRC they are supposed to match #f9f9f9 (the old MediaWiki table background colour). However, this is more of a problem with whatever CSS is being used.