forcing element height to scale

As an author, I want to be able to write a viewport without dimension attributes:

<svg viewBox="0 0 550 350" preserveAspectRatio="xMinYMin meet">

and css:

svg {
   height: auto; /* possibly some other magic value here? */
    display:block;
    max-width: 100%;
}

and know that the element height will be forced to 63% (350/550) of the width in all cases.

As you probably all know, it doesn't work this way in browsers right now. See especially comments 8 and 9 from this longstanding and seemingly forgotten bug:

https://bugs.webkit.org/show_bug.cgi?id=68995

SVG height apparently needs to be explicit in all cases, which is a fundamental deal breaker for responsive design. Weirdly enough there is a hack in webkit/blink where adding css `height:100%` causes the computedHeight to scale proportionately but that behavior isn't spec'ed or even sensible. 100% of what?

The cross-browser workaround for now is to use intrinsic ratios to create a proportion in the wrapper like this:

..svg-wrap {
    height: 0;
    padding-top:63.63%; /* 350px/550px */
    position: relative;
}

svg {
    height: 100%;
    display:block;
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

But this is clearly not what we want long-term, because it requires maintenance of custom classes for the proportion. The other option, of course, is watching for viewport resize with script:

http://www.brichards.co.uk/blog/webkit-svg-height-bug-workaround

That's also brittle and tedious.

I haven't worked out all the details but it seems to me there should be some kind of possible css value for SVG height (if not "auto" or "auto !important" then perhaps a magic string like "scale") that will instruct browsers to  look at:

a) the proportion of any dimension attributes, if specified, otherwise:
b) the proportion implicit in a declared viewBox, if specified

and use that to generate the element height based on the element's width, using css. If I'm wrong about any of this I would greatly appreciate an clarification.

Thanks,
Ben

Received on Friday, 12 July 2013 23:13:10 UTC