Webkit-Transform:Scale doesn't work in HTML5 FullScreen mode (chrome only)

Question

I'm working on a project that requires the page to scale all the elements up according to the page (for the curious: generates html from XBMC skins).

Scaling working in windowed mode

Scaling working with Chrome fullscreen mode

Scaling not working with HTML5 requestFullScreen (note the black space)

Now the problem I'm having is that in Chrome, when you use the fullscreen link the body does not scale up (like it does when you just View -> Enter FullScreen. It seems to get the correct sizes but the -Webkit-Transform: scale(x, y) seems to have no effect

Code: http://jsfiddle.net/rCLxG/

Result: http://fiddle.jshell.net/rCLxG/show/light/

Thanks in advance!

Answer 1

Fixed by using

        document.body.webkitRequestFullScreen();

instead of

    document.getElementById("MediaCenter").webkitRequestFullScreen();

It appears that when you use webKitRequestFullScreen on an element some of the CSS applied to outer elements (like body) don't work. Can't find any documentation on this behavior but I'll keep this answer updated if I find anything

Answer 2

I had similar problem. Looks like when you make any element full screen, its scale is ignored (I have also tried to set scale after making full screen, still doesn't work). The solution is to make additional wrapping block, which is not scaled and set it to full screen.

This was not working, when I made #fsdiv full screen (it wasn't scaled in full screen):

<div id="fsdiv" style="transform:scale(5);transform-origin: left top;">
  Hi there!
</div>

This worked:

<div id="fsdiv">
  <div style="transform:scale(5);transform-origin: left top;">
    Hi there!
  </div>
</div>