PiP demo animation moves outside of screen element

[mcclurgm]

What Happened

In the "Get work done. Or play" section of the homepage, there's an animation that demonstrates Picture in Picture. On my machine (Firefox), the animation moves the sample PiP window to the wrong location. It animates outside the screenshot image to the baseline of the "Picture-in-Picture" header text. Here's a video:

pip-animation.mp4

Expected Behavior

The PiP demo window should stay within the screen like with actual PiP

Steps to Reproduce

1. Go https://elementary.io
2. Scroll down to the demo
3. Wait for the animation to play; it should animate to be on line with the text instead of the bottom of the screen image.

Logs

???

Platform Information

elementary OS Hera
Firefox 90.0

[cassidyjames]

This is actually #2801, as that image is a different image and size now, but your browser has the old one cached. Ctrl+Shift+R to hard reload and it should be fixed.

[mcclurgm]

I just cleared all cache data from elementary.io and hard reloaded and the same behavior is still showing up. (It also happens in private, which shouldn't use cached data afaik.) So it seems like this is more than just using an old cached image, unless I'm missing something dealing with this data.

[cassidyjames]

@mcclurgm ah, I thought this had already been merged: #2805

I think that's what you're seeing, then. Are you on HiDPI or zoomed in above 100%?

[mcclurgm]

I'm using 120% zoom on a "low DPI" screen. (It's awkwardly dense, so that's my method of dealing with it.)

I did just confirm that when I zoom back out to 100% it behaves normally. Seemingly anything other than 100% shows this bug. I also tried it on Vivaldi (Chromium-based), and rather strangely it started by animating to the center of the screenshot, then when I zoomed to 100% it started working at all zoom levels 🤔

At any rate, it seems like the animation is sensitive to browser zoom level.