Re: intrinsicRatio and the CSS min/max algorithm

On Aug 9, 2013, at 11:19 AM, Boris Zbarsky <bzbarsky@MIT.EDU> wrote:

> On 8/9/13 1:59 PM, Benjamin Lord wrote:
>> For one thing, the CSS min/max algorithm as it stands doesn't actually do anything with this intrinsic ratio.
> 
> Sure, but the algorithms for computing width and height do.  So if you have an intrinsic ratio and one of height and width set, then you use the ratio to compute the other one, then apply the min/max bits.


Sure, and Firefox and Opera 12 nail it per the 1.1 spec. But it doesn't work anywhere else. Quick test:

http://jsfiddle.net/EGvgD/

Webkit and Blink both screw up all four versions, reading the percentage-unit attributes as css values, and not as "flags" to trigger an intrinsic ratio calculation based on viewBox. IE10 does a little better on first layout, but on window resize IE doesn't recalculate the element heights, leading to weirdness. All of these are dealbreakers. These bugs could be fixed some day, of course, or laboriously patched with script. (The only cross-browser workaround I know of is a container with padding-top set as a fixed percentage.)

My point is that part of the blame for these ultra-basic layout features still being unusable for responsive production work in the year 2013 has to do with the intrinsic sizing SVG spec being convoluted, and (*deliberately*) poorly integrated with CSS, which is more intuitive, popularly understood, and battle-tested.

-Ben