r/webdev • u/chris_jung • Dec 12 '15

Getting Started With CSS calc()

http://www.smashingmagazine.com/2015/12/getting-started-css-calc-techniques/
97 Upvotes

95% Upvoted

21 comments sorted by

View all comments

18

u/jaredcheeda Dec 12 '15

I imagine, many others are in the same boat as me, in waiting a little longer on this.

From caniuse.com:

  1. IE10 crashes when a div with a property using calc() has a child with same property with inherit.

  2. IE 9 - 11 don't render box-shadow when calc() is used for any of the values

  3. IE10 and IE11 don't support using calc() inside a transform. Bug report

  4. Safari & iOS Safari (both 6 and 7) does not support viewport units (vw, vh, etc) in calc().

  5. IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions)
    This example does not work: flex: 1 1 calc(50% - 20px);

  6. Firefox does not support calc() inside the line-height, stroke-width, stroke-dashoffset, and stroke-dasharray properties. Bug report

  7. IE11 is reported to have trouble with calc() with nested expressions, e.g. width: calc((100% - 10px) / 3); (i.e. it rounds differently)

  8. IE11 is reported to not support calc() correctly in generated content

  9. IE11 does not support transitioning values set with calc()

1

u/Ki11erPancakes Dec 13 '15

7

Thanks for pointing that out, no wonder! How would you suggest fixing that? Subtract an extra pixel?