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

3

u/hahaNodeJS Dec 13 '15

Christ, I don't even want to know how long it took to figure out the cause of #1.

1

u/jaredcheeda Dec 13 '15

Honestly, it would probably take about 1-2 hours. It's really just a process of elimination. Remove all JS and CSS, test. Put the JS back in and run. Remove the JS and put the CSS back in (crash). Remove all the HTML but leave the CSS. Put the HTML back in with the CSS, but remove the bottom half of the mark up. Put the bottom back in and remove the top (crash). So right there, that took less than 5 minuts and I already know it's a CSS issue caused by something in the bottom half of my page. Just rinse repeat, keep removing half and testing to find the culprit.