closingtag / calc-polyfill Goto Github PK

For instance, things like Isotope.js have relayout(). Does calc polyfill have anything like that?

I ask because it seems like when I trigger various viewport adjustments (open/close IE8 dev tools, shrink/expand the viewport) it seems to work better and better.

It'd be nice to add a timeout that triggered calc relayout. :D

I wanna use this polyfill to fix vh/vw not working in old safari, here is a demo: https://codepen.io/mherchel/pen/mIueA. But it doesn't work. Do you have any plan to support it?

Hi,

I was just wondering if there was a way to get this script to run again after loading in new content that has a CSS width: calc applied to it? E.g. picturefill allows you do to this:

picturefill({ reevaluate: true });

At the end of the ajax function, which recalculates the correct images.

By the way, to get the script to work in IE8 for me I had to comment out the console.log messages, as I was getting a console undefined error. Thanks though, it's working well so far.

http://codepen.io/corysimmons/pen/Qwbjyr

Testing on IE8. Doesn't seem to do anything.

Not sure if I'm doing something wrong...... =[

This is the most underrated polyfill in existence. It's saved my ass so many times.

Thank you for doing an amazing job on it...

🍰 🎉 ❤️

win.requestAnimationFrame(detectChange) on IE8 is error

.foo {
  background: red; /* works */
  width: calc(100% / 3); /* works */
}

.foo:nth-child(1) {
  background: red; /* works */
  width: calc(100% / 3); /* doesn't work */
}

IE8

I'm trying to use this polyfill to get calc grids work with older Android browsers, but without success. This is my simple test case http://codepen.io/anon/pen/RPzKBe . Not sure if it's due bug or unsupported feature or if I'm using the polyfill somehow wrong. Tested on Android 4.0 and 4.2

Shouldn't min just be a direct minification of the lib?

I can't get a 4.0.3 vm to emulate, but on 4.1.1 it doesn't calc width: calc(100% / 3);

I'm getting an Access Denied error trying to run the script in IE8. http://d.pr/i/MstT I'm not making any kind of cross-domain request to the script as far as I'm aware.

You can see it live at http://railex.thesmackpack.com unless I figure out the issue in the meantime.

99.99% * .5 doesn't work.

width: calc(50px * 2) works fine, width: calc(50% * 2) results in 240100, width: calc(50% / 2) results in 1.

I have problem with height on IE8 and test our plugin but not working...

In calc.js on line 227 there is some weird invisible character after the 2nd pipe. Replace your line with this one (or just delete the spaces and double pipes and reinsert them).

                              .here
if ( stylesheets.length > 0 || cssTexts.length > 0 ) {

Here's a diff https://www.diffchecker.com/p8vajsw9

Once that problem is solved, a new error pops up: Uncaught ReferenceError: contentLoaded is not defined line: 503 (#24)

You are adding dynamic support for (r)em by using the ontextresize event (source). You should add all units relative to font size, ie. ex, ch.

The polyfill dont work on my css, i use @font-face in my code and any moz- and webkit.

I know media queries don't work but in I8 I was trying out lost grid and got this polyfill working perfectly but If i add a media query with a lost-column/lost grid inside it just breaks the page and shows nothing at all in I8 all the elements disappear.

Above Works

Below would break it and show nothing

Is this expected? or is there a way to just show the original before the media query if i remove the query the content shows as expected is there a workaround? I'd be happy just to lock the grid at a fixed width for I8 and have the polyfill work

Thanks
Jake

Haven't narrowed down this problem but calc() doesn't seem to work when it's nested.

Not sure if this is related but both calc()'s are using a decimal (99.99%).

Right now IE doesn't support calc() inside of any of their Flexbox rules. (e.g. flex: 0 0 calc(100% - 30px) won't work)

Is this something that you could possibly fix?

You are adding dynamic support for percent (%) by using the onresize event (source). You should add all units relative to viewport, ie. vw, vh, vmin, vmax.

It would be really nice if this had Bower support so that it could be installed via the Bower package manager.

http://bower.io/

Please?

I want use this polyfill with like browserify.
But I can't found this on npm.

Can you register this to npm?

I've got my script running after my CSS is pulled in, like it says to do in the documentation. However, I'm still getting this error:

contentLoaded is not defined
(anonymous function)    @   calc.js:511
(anonymous function)    @   calc.js:544

(I got the access denied figured out)

I'm getting an error "Invalid procedure call or argument" on line 252 char 7 (http://d.pr/i/lIc2). That's the line with querySelectorAll() on it, which I know you specify as a dependency in the Docs, but I have IE8 running in Standards Mode which is supposed to support the function and I'm still getting this error.

You can see this at http://railex.thesmackpack.com in IE8

I keep on getting this error in IE8:

The value of the property 'contentLoaded' is null or undefined, not a Function object

Is it something I am doing wrong in the set up?

I've tried to do a simple demo here and couldn't get it to work on Android 4.2.2:

I only got it to work on my laptop's Chrome browser using mobile emulation.