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...
선택된 해결법
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
문맥에 따라 이 답변을 읽어주세요 👍 0모든 댓글 (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
선택된 해결법
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.