Fullscreen video disappears when using CSS transform on parent element
I have a video element that opens in an overlay. The overlay is position: fixed, and the element inside of it is centered vertically & horizontally using position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.
All of the above works just fine, until a user clicks the fullscreen icon, then the video disappears... You can still hear the audio, but the video disappears...
If I cancel the transform: translate(-50%, -50%); in the debugger, the video pops right back into place...
Ọ̀nà àbáyọ tí a yàn
thanks, guigs2, but i'm not really looking for ways to make it work for me, but to make it work for everyone...
i realized after posting here that what i really wanted to do was submit a bug, so i did so here; seems to be getting some traction: https://bugzilla.mozilla.org/show_bug.cgi?id=1055977
cheers, Atg
Ka ìdáhùn ni ìṣètò kíkà 👍 0All Replies (5)
If you toggle this feature in about config: browser.fullscreen.autohide to false.
Good reference http://www.w3.org/2010/05/video/mediaevents.html and http://css-tricks.com/NetMag/FluidWid.../Article-FluidWidthVideo.php
It is also possible to use the webkit fullscreen controls:
http://www.thecssninja.com/demo/fullscreen/ and Fullscreen API and example: https://developer.mozilla.org/en-US/d.../Using_full_screen_mode#Browser_compatibility
If you toggle this feature in about config: browser.fullscreen.autohide to false.
Good reference http://www.w3.org/2010/05/video/mediaevents.html and http://css-tricks.com/NetMag/FluidWid.../Article-FluidWidthVideo.php
It is also possible to use the webkit fullscreen controls:
http://www.thecssninja.com/demo/fullscreen/ and Fullscreen API and example: https://developer.mozilla.org/en-US/d.../Using_full_screen_mode#Browser_compatibility
If you toggle this feature in about config: browser.fullscreen.autohide to false.
Good reference http://www.w3.org/2010/05/video/mediaevents.html and http://css-tricks.com/NetMag/FluidWid.../Article-FluidWidthVideo.php
It is also possible to use the webkit fullscreen controls:
http://www.thecssninja.com/demo/fullscreen/ and Fullscreen API and example: https://developer.mozilla.org/en-US/d.../Using_full_screen_mode#Browser_compatibility
Ọ̀nà àbáyọ Tí a Yàn
thanks, guigs2, but i'm not really looking for ways to make it work for me, but to make it work for everyone...
i realized after posting here that what i really wanted to do was submit a bug, so i did so here; seems to be getting some traction: https://bugzilla.mozilla.org/show_bug.cgi?id=1055977
cheers, Atg
Hi Atg, Happy to hear you found bugzilla :-) I will mark your post as the solution and let the conversation continue in the bug.
If there are any other questions we can help with, we are happy to.