Sometimes I get page preview pop-ups with two pokeys. These screenshots are from the Main Page on English Wikipedia in safe mode (https://en.wikipedia.org/wiki/Main_Page?safemode=1).
{F25999013}
{F25999023}
= Developer notes
Captured and immortalised in this jsfiddle:
https://jsfiddle.net/raw3y1jf/3/
The question is - why?
The problem is that the image thumbnail width is less than the expected 200px
https://github.com/wikimedia/mediawiki-extensions-Popups/blob/master/src/ui/thumbnail.js#L167
and the clip-path mask is a fixed width, so although the pokey is there - the image needs to be 200px to be aligned with it!
When changing this make sure to use the results of T205989 to verify that the output is behaving as expected.
The issue can be replicated here on [[ http://localhost:6006/?selectedKind=Thumbnails&selectedStory=landscape%20-%20Thin%20thumbnail&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybooks%2Fstorybook-addon-knobs | landscape - Thin thumbnail ]]
Add a green background to the SVG to make it clear where the mask is:
{F27558813}
This reveals the pokey is nowhere to be seen!
{F27558845}
Add an image that's 129px, to get the pokey to show correctly the image needs to be displaced (via x attribute) by 200-129px (71px)
{F27558984}
== Acceptance criteria
[] Update The clip-path mwe-popups-landscape-mask so that it's compatible with thin thumbnails.