0

I'm trying to figure out an alternative way to implement calc using vw units, as this isn't supported yet in Safari/mobSafari (probably IE too when I get to that). I've set up a JSfiddle to show a simple example of how it differs for Safari. I've had a bash (unsuccessfully) with JS but with no success. Any pointers in the right direction appreciated - if there's a possible alternative via CSS that would be perfect.

It's basically recreating left: calc(-50vw + 50%) in a cross-browser supported way.

bsod99
  • 1,287
  • 6
  • 16
  • 32
  • Safari supports `vw` units. What problem are you having? – Pointy Sep 25 '14 at 21:32
  • It doesn't with calc unfortunately - if you inspect the element in the fiddle, you'll see the rule with calc is disabled in safari – bsod99 Sep 25 '14 at 21:32
  • Why do you even need `calc()` here? If you want that image to be 100% the width of the viewport, just make it `100vw` and `left: 0`. – Pointy Sep 25 '14 at 21:33
  • The div is relatively positioned and needs to break out of the parent container to span full width. The image has a max width of 100% and scales with the viewport. – bsod99 Sep 25 '14 at 21:37
  • you should use something like this http://stackoverflow.com/questions/21224411/css-calc-viewport-units-workaround – Claudiu Creanga Sep 25 '14 at 21:38
  • I'd make it `position: absolute` before I'd rely on `calc()`. – Pointy Sep 25 '14 at 21:42

0 Answers0