Strange vw/vh scaling behavior in Firefox/Chrome

I got an email from an author today asking about a strange behavior
they were seeing in both Firefox and Chrome, related to viewport
units.  Check out this codepen:
http://codepen.io/TabAtkins/pen/vONEPO?editors=110

Change the size of your window, and the rect in the second example
moves in a strange way.  Quoting from the CodePen:

> Matches the previous example only when the
> window is 1000px wide (matching the viewBox
> width). If the window is smaller or larger, the
> size of a vw is first scaled by the ratio of
> (window width)/(viewBox width), then the
> normal viewBox scaling occurs, resulting in a
> double-correction.

If you set the second <svg> to a fixed width (like 1000px), then the
reason for the correction becomes obvious - as you resize the window,
the two circles stay aligned (the first one grows or shrinks, but its
left edge stays aligned with the other circle). Thus, the correction
is clearly *designed* to make sure the viewport units are indeed
relative to the window, so that a viewport length is visually
identical no matter where it shows up.  Unfortunately, this correction
gives bad results when the viewBox applies any scaling to the contents

The *correct* fix is to scale the size of vw by (window width)/(<svg>
width).  For deeper nesting, you just need to repeat this, with
"viewBox width" taking the place of "window width", and multiply all
the factors when done.  If this is done, all five examples on the
codepen will have the left edges of their rects aligned.

Can we get this guidance put into SVG?  Or does it belong in CSS Values&Units?

~TJ

Received on Monday, 4 May 2015 19:23:05 UTC