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.
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:
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
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.