Viewport units are great for creating responsive designs. Unfortunately, issues with the WebKit implementation reduced their usefulness. A couple of months ago, I discovered that Timothy Loh had fixed many of the issues in Blink. Despite the size of the patch, it seemed like a prime opportunity to learn more about the CSS subsystem in WebKit and about viewport units in general. So, I took up the task to port the Blink fix over to WebKit. This turned out to be less than straightforward. In the year since Blink forked from WebKit there has been notable divergence in the structure of the CSS code. I ended up using the Blink patch as a guide and writing my own variant in WebKit. After a great number of revisions, the patch finally landed in WebKit about two weeks ago.
So, what works now?
The most obvious fix is that resizing now works. If you size an object with viewport units and then the user resizes the browser window, the object will resize as the window resizes. Prior to this patch, you would need to reload to get the resize to happen. This is an especially big boon for mobile web apps, since changing device orientation between landscape and portrait is simply a resize of the viewport. In addition, now
getComputedStyle conforms to the spec and returns resolved pixel values for viewport units. This patch also makes it possible to use
calc with viewport unit values. One of the demos from our shapes showcase clearly shows the resizing effect, as does our demo of positioning shapes with negative margins.
Animations and transitions with viewport units also didn’t work properly. In older versions of WebKit, the following example doesn’t animate, but in the latest WebKit nightly, it animates nicely.
It is likely that other bugs have been fixed by this as well. Get the latest WebKit nightly and test it out for yourself. If you come across any more issues with viewport units that haven’t been fixed by this patch, please head over to bugs.webkit.org and file a bug! I would like to make the viewport unit support in WebKit as robust as it can be, and can only do that with your help.