I'm developing a web app whose main purpose is streaming dancing videos and I'm facing this problem just in chrome mobile, it works flawlessly in firefox mobile, and in every other desktop browser.
The thing is I need to be able to flip an html5 video element and it works... well, it works until I go fullscreen, then it stays for a few seconds and reverts to the original video (not flipped).
I'm using the css "transform: scaleY(-1)" property.
I've tried setting this property to the video tag, to an upper div, within the video tag and the div which requests fullscreen. And to the div requesting the full screen with no success. If I set scale(); to any positive number between 0 and 1, it seems to do the trick but it doesn't work with negative numbers.
I'm aware of the UA css :not(:root):-webkit-full-screen {transform: none !important}, but it doesn't seem to be the problem. I would rather say it's more related to the way chrome handles video in fullscreen mode.
Any help would be appreciated. If I can't make it work, I'll have to provide another stream with the mirrored version of each video.
Thanks in advance, If you need any examples don't hesitate on asking.