Plyr: [V3][3.0.6] Strange animation on settings icon click

[artifex404]

Expected behaviour

Animation of the setting wheel

Actual behaviour

Bug as seen on the screencast:

Environment

• Browser: Google Chrome
• Version: Version 65.0.3325.181 (Official Build) (64-bit)
• Operating System: Mac OS X
• Version: 10.11.6 (El Capitan)

Steps to reproduce

• Clicking the icon

[sampotts]

Very odd. I’ve not seen that before on Chrome 64/65/66 on MacOS. It’s just a simple rotation so I guess you’d have issues in other places too.

[artifex404]

Maybe it's related to adding the rotation directly to the inline svg element. I'll try to test in a codepen.

[artifex404]

When this style is commented out the rotation works fine. With this style the rotation acts funny, as on the screencast gif.

```
.plyr--video .plyr__controls .plyr__control svg {
-webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
}

[artifex404]

I made a codepen: https://codepen.io/artifex404/pen/xWpWQN?editors=1100

And it acts similarly with the drop-shadow enabled:

[sampotts]

Sounds like a bug with Chrome. Will raise it with them if I can reproduce but this is the first I’ve seen that issue.

[artifex404]

Yep. In Firefox 59.0.2 (64-bit), the rotation is fine, but the whole Plyr video player gets black for a fraction of second. In Safari 11.0.3 all works without issue.

[sampotts]

Firefox seems to flicker the poster image regardless of if the transition or drop shadow are there. Even stranger. Once played it's fine.

Really hard working around the browser bugs sometimes. I still can't replicate the original Chrome issue though.

[artifex404]

Strange it is! Seems the bug is on El Capitan on latest Chrome, same Chrome version on High Sierra and Sierra works fine. If you have access to browserstack.com I got it reproduced there on latest Chrome on El Capitan.

[sampotts]

I'll dig out my MacBook as that's still clinging on to El Capitan and give it a try then.

[friday]

I'm not getting this on the demo, and have never seen it. And I'm using El Capitan and the same Chrome version.

If you haven't, please try the demo in an incognito tab. That disables most extensions.

[artifex404]

Disabled all extensions and tested in incognito - same thing. I got it reproduced also on browserstack virtual machine, so it's not only on my machine. If it's only on El Capitan with specific chrome versions that might be not a big issue.

[artifex404]

This Chrome bug might be related. https://bugs.chromium.org/p/chromium/issues/detail?id=701075 I guess applying transformation directly on SVG causes it. If the button SVG icon could be wrapped in a "div" and the transformations applied to that wrapper, it could fix that issue.

[friday]

Strange. The issue is marked as fixed, but I guess it's something similar at least. Thanks!

[artifex404]

Yep, sorry, that was an old issue. There's still a lot of SVG issues opened with Chromium...

Wrapping the SVG and applying the transformation to it fixes the issue for me. Here's a codepen of working rotation: https://codepen.io/artifex404/pen/KoQpKj?editors=1100

But of course you'll need to reproduce the bug itself on your machine. Some more info about my machine if that might help:

MacBook Pro (Retina, 15-inch, Mid 2015)
Intel Iris Pro 1536 MB
2,2 GHz Intel Core i7

[sampotts]

I could wrap it in a <span> for now. Not too much of an issue.

[sampotts]

Are you still seeing this? I've not been able to replicate again. If you can then report back and I'll take another look.

[artifex404]

Looks like it's working now for me in latest Chrome (68.0.3440.106). I suppose it was a Chrome bug.