In T276668#6914838, @ovasileva wrote:

@Nomsterio - thank you for getting this started! do you have availability to continue working on a fix here?

In T276668#6893861, @Gilles wrote:

@Nomsterio let me know if you have time to look into this one as well, thanks!

In T276112#6876076, @Jdlrobson wrote:

Yes. Confirmed that via git bisect.

7b0937c5a865f282f7e5100613b1113a5990ef2e is the first bad commit
commit 7b0937c5a865f282f7e5100613b1113a5990ef2e
Author: Noam Rosenthal <noam.j.rosenthal@gmail.com>
Date:   Tue Dec 8 17:13:13 2020 +0200

    Use CSS clip-path instead of SVG when supported.
    
    This reduces a lot of churn in creating the SVG
    element and related helpers.
    
    When IE11 is dropped, the SVG code-path can also be dropped.
    
    Bug: T269336
    Change-Id: I7f91192dedc2a78f1c7c84179cff1687593177c0

 resources/dist/index.js               | Bin 43126 -> 43329 bytes
 resources/dist/index.js.map.json      | Bin 207213 -> 207998 bytes
 src/ui/renderer.js                    |  14 +++--
 src/ui/templates/popup/popup.less     | 106 ++++++++++++++++++++++++++++++++--
 src/ui/thumbnail.js                   |  34 +++++++----
 tests/node-qunit/ui/thumbnail.test.js |  15 ++++-
 webpack.config.js                     |   4 +-
 7 files changed, 147 insertions(+), 26 deletions(-)

Do we revert or try to revise? I'm guessing the CSS in /src/ui/templates/popup/popup.less needs revising for RTL. cc @Nomsterio @Gilles

In T272169#6776297, @gerritbot wrote:

Change 658493 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Fix bluriness on low-DPR screens

https://gerrit.wikimedia.org/r/658493

In T272169#6769738, @Jdlrobson wrote:

I can replicate this on browser stack in Windows and now understand the issue some more.

$('<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Computer_modern_sample.svg/640px-Computer_modern_sample.svg.png">').css({ 'object-fit': 'cover', width: '320px', 'min-height': '200px'}).appendTo('#content')

The image is 640px by 270px so it's not possible for it to be 320px x 200px without some blur. Ideally it would render at 320px by 135px.

@Nomsterio I see several other options here

1. We request a bigger thumbnail. Perhaps the blur will go away? Note we're not rendering an SVG here, we're rendering a PNG version of an svg (don't ask ;-))

That's what the original code did, and in the attached change request I mimic that original behavior: loading a bigger PNG and clipping it.

Yes, the solution of modifying on init was obviously not the right solution :)

In T269336#6752102, @Jdlrobson wrote:

T272169 got raised today which coinciding with the deployment here. I haven't been able to replicate it yet, but likely caused by this.

Does Windows have any documented rendering issues with clip path @Nomsterio ?

In T269297#6745086, @Jdlrobson wrote:

@Gilles @Krinkle what is the performance recommendation here, given @matmarex and the revert that happened here?
Am moving this off our sprint board (and thus radar) for now until we can get clearer guidance on whether we still want to do this, and what we want to do differently.

Yes, it's possible.

In T269336#6666098, @Gilles wrote:

Could the existing SVG mechanic be kept as a fallback that only runs for IE11, with clip-path used for other browsers?

Looks great! Let's tweet it
Thanks @srodlund

Thanks!

In T267185#6637239, @srodlund wrote:

One idea, for the featured image we could use the big version of the Sloth/Anteater photo: https://commons.wikimedia.org/wiki/File:Myresluger2.jpg

Good idea!

In T267185#6637100, @srodlund wrote:

@Nomsterio I saw that you accepted changes on the doc -- If you feel this is ready, I can move it over to the blog to post early next week. Let me know.

In T267185#6625467, @srodlund wrote:

@Nomsterio I took a first pass at this. Please don't be discouraged by the number of edits/suggestions. :-) The post is good and super-informative! It just needed a little more organizational structure. I made some additions and some obvious edits and would like you to go through and accept or decline my suggestions. After it will need some wordsmithing and editing, but I'd like to see what it looks like with the adjusted organizational structure.

In T254335#6235700, @srodlund wrote:

Nomsterio -- I finished making edits (including making some bigger changes to one paragraph I commented on). Let me know if it looks good, and I will move it over to the blog to prepare for publication.

Looks great. I did a little extra pass on it myself.

• Who do you want listed as the authors of the doc

Myself and @Gilles, or clearly say that I'm the author and Gilles wrote the background as part of Wikipedia?

In T254335#6224700, @srodlund wrote:

@Nomsterio can you give me permission to edit the document directly? Right now I just have the ability to suggest. Thanks!

Done

In T254335#6220494, @srodlund wrote:

@Nomsterio I went through and left some suggested edits and comments on the doc. Once you've had a chance to address these, I'll go through again and do another edit. It's a lot, so let me know if you have questions.

@Gilles should I add that context to the post? Or do you want to add something like a preface from wikimedia perf team?

In T254335#6188512, @Aklapper wrote:

Ah, thanks a lot for the clarification. And sorry - I had no idea, obviously! :)
That was an interesting read - thanks! I took the liberty to leave a few smaller comments from an outsider perspective on the first page of that draft.

In T254335#6188304, @Aklapper wrote:

Hi @Nomsterio, thanks for taking the time to report this and welcome to Wikimedia Phabricator! Could you elaborate a bit how this will be related to specific Wikimedia aspects? (I'm basically asking as you registered a Wikimedia account an hour ago, so I wonder what brought you to Wikimedia for this.) Thanks! :)

https://docs.google.com/document/d/1y6HOqqc7u1x6yxpPsaj3Dl0OMqll7eWhb7aQ7LA8PA0/