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

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?

Possible? yes. I advise against it though. Part of the gain of switching to clip-path would be the fact that it removes a good chunk of the JS code... by keeping the IE fallback in the loaded extension some of the performance gains would be lost, plus the code would become more cumbersome and would make future improvements (slightly) more difficult.

If IE11 is still to be supported, I suggest freezing a version of the extension for use there. This would allow making the popup extension a lot smaller, readable and performant - by targeting modern ES in the webpack config, moving a lot of the computations to CSS custom properties instead of JS, making the less output a lot less verbose, and using modern CSS features like clip-path as mentioned in this issue.

The extension is already divided to implementation and loader, the loader bit can decide which implemented to load for modern browsers vs. IE.

Change 647002 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Use CSS clip-path instead of SVG when supported.

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

I'm noticing some UI regressions in the storybook in http://localhost:6006/?path=/story/thumbnails--portrait-svg (run npm run storybook to replicate). I have no idea if these equate to errors in production, but fixing or understanding these is important to me for having confidence in these changes.

It seems a margin-top of 152px is being added to mwe-popups-extract which pushes down the preview that is not necessary. My guess is the following code might not be needed for these previews when clip path is used:

export function layoutPreview(
        preview, layout, classes, predefinedLandscapeImageHeight, pointerSpaceSize, windowHeight
) {
        const popup = preview.el,
                isTall = preview.isTall,
                hasThumbnail = preview.hasThumbnail,
                thumbnail = preview.thumbnail,
                flippedY = layout.flippedY;

        if (
                !flippedY && !isTall && hasThumbnail &&
                        thumbnail.height < predefinedLandscapeImageHeight
        ) {
                popup.find( '.mwe-popups-extract' ).css(
                        'margin-top',
                        thumbnail.height - pointerSpaceSize
                );
        }

Change 647002 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Use CSS clip-path instead of SVG when supported.

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

Change 654605 had a related patch set uploaded (by Noam Rosenthal; owner: Noam Rosenthal):
[mediawiki/extensions/Popups@master] Make CSS.supports more resilient

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

Change 654605 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Make CSS.supports more resilient

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: Windows 10
Browser: Chrome
Device: NA
Emulated Device: Browserstack PC

Test Artifact(s):

QA Steps

Please QA on IE11 and modern Chrome + modern Firefox. https://en.wikipedia.beta.wmflabs.org/wiki/Sample_page

✅ AC1: When JS is disabled a browser-based tooltip should display on hover.

IE 11	Chrome	Firefox

✅ AC2: When page previews are disabled a browser-based tooltip should display on hover.

IE 11	Chrome	Firefox

✅ AC3: The browser-based tooltip should not display on hover when page previews is enabled

IE 11	Chrome	Firefox

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: Windows 10
Browser: Chrome
Device: NA
Emulated Device: Browserstack PC

Test Artifact(s):

QA Steps

Please QA on IE11 and modern Chrome + modern Firefox. https://en.wikipedia.org/wiki/Dog

✅ AC1: When JS is disabled a browser-based tooltip should display on hover.

IE 11	Chrome	Firefox

✅ AC2: When page previews are disabled a browser-based tooltip should display on hover.

IE 11	Chrome	Firefox

✅ AC3: The browser-based tooltip should not display on hover when page previews is enabled

IE 11	Chrome	Firefox

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 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 ?

I'm not aware of Windows specific issues. Doesn't seem like clip-path affects compositing in any way, which could have potentially affected this.
It's possibly related but I wasn't able to reproduce this issue on Browserstack and I don't use Windows :(
Will try to think of a way this could happen.

Resolving this for now - can continue conversation on T272169: Regression: Page-Previews seem to be blurred for thumbnails with natural height less than 200px.