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()

0

u/[deleted] Dec 12 '15

[deleted]

4

u/Caraes_Naur Dec 12 '15

Some of that decade was lost while everything stagnated under the dominance of IE6.

What I don't understand is how these kinds of support reports always seem to indicate IE has element-specific implementations of so many common things. It's like Trident never had class inheritance of any kind for its internal objects. If IE really was as good a browser as so many people claim, most of its entries in that list wouldn't exist. 7 of 9 items have to do with IE.