Christopher Currie

A Window Into the World

I started looking at Fullscreen support Internet Explorer 11 when trying get video.js working for a project. IE 11 added support for the WHATCG Fullscreen Specification, which is great enhancement that’s really useful for putting HTML5 video into fullscreen. Support has been around in Webkit and Mozilla for a while, but is new in IE 11.

For many users, everything works great, but there’s one catch: if your video happens to be in an iframe, and you try and make the video fullscreen, all of your javascript-driven layout for controls or other screen overlays breaks spectacularly.

Fullscreen directly on the page

This first example is the happy case: a normal box being put into fullscreen mode, and measurements taken of the gray box on the left:

clientWidth:  

clientHeight:  

 

offsetWidth:  

offsetHeight:  

Bounding Client Rect:

  • Top:  
  • Right:  
  • Bottom:  
  • Left:  

jquery 2.1.0:

  • innerWidth:  
  • outerWidth:  
  • innerHeight:  
  • outerHeight:  

Fullscreen through an iframe

The second example has the same HTML content hosted within an iframe:

Deconstructing the issue

This problem had us scratching our heads for a while, while we worked out how to deal with it. Testing for it was simple enough, just check for whether offsetWidth/Height is less than clientWidth/Height. Since the former should always be less than or equal to the latter it’s easy to tell when the value is wrong, but not what the true value should be.

After staring at the numbers for a while, it dawned on us that the values were off by exactly two orders of magnitude! This was particularly obvious for the getBoundingClientRect values, which are decimals. Comparing these numbers to their equivalents in Chrome and Firefox confirmed the hypothesis.

As of this writing, the problem is visible in IE version 11.0.9600.16428.