Adobe

decor

Web Platform Team Blog

Making the web awesome

Improving Viewport Unit Support in WebKit

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.

See the Pen jpBxv by Adobe Web Platform (@adobe) on CodePen.

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.

6 Comments

  1. June 12, 2014 at 11:29 am, Vadim Makeev said:

    Is there any chance to see it this fall in the new Safari versions on OS X and iOS?

    • June 12, 2014 at 1:36 pm, Bem Jones-Bey said:

      Hopefully, but that’s up to the folks at Apple. So we’ll just have to watch the beta releases and see.

  2. June 12, 2014 at 1:13 pm, Richard said:

    will this affect iOS Safari? Their viewport unit support has been horrible for some time.

    • June 12, 2014 at 1:38 pm, Bem Jones-Bey said:

      If Apple pulls it into iOS 8, then yes it will. I know that Apple has done some other fixes in the WebKit tree related to viewport handling on iOS, so even if this patch doesn’t make it into iOS8, viewport unit support should be improved. (But hopefully this patch will make it into iOS 8 along with the other fixes.)

  3. June 14, 2014 at 6:10 am, Šime Vidas said:

    Btw the animation in that demo is partially broken in IE11. Not sure what’s up with that.

    • June 17, 2014 at 10:54 am, Bem Jones-Bey said:

      Interesting, it is pretty broken, it looks like it’s doing something weird when it calculates the viewport units for the translation. Since what I have there works in every other browser, I’m guessing that it’s an IE bug. :-(

      (I grabbed the Win 8.1 + IE 11 VM from modern.ie to check.)