0

I am using less.js on my local env. I have an issue with IE8 + less.js (1.4.1) + es5-shim.js. When I include es5-shim native ie8 crashes. I checked and did some test that it is because of usage string.trim() function in less.js. When I modified trim function to return not trimmed string ie8 doesn't crash but now script doesn't recognize mixins etc. Maybe anyone has some solution for it?

Adrian Wajs
  • 137
  • 1
  • 3
  • 11
  • Try adding the polyfill for [trim](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim) manually and file a bug with es5-shim.js – Kerry Liu Sep 25 '13 at 15:17
  • I tried a lot of examples even jQuery etc. it still crashes :) – Adrian Wajs Sep 25 '13 at 15:22
  • Did you add the polyfill before the es5-shim.js? It would be helpful if you posted the actual error message from ie8. You may be running into a regex bug. – Kerry Liu Sep 25 '13 at 15:28
  • Generally I was modifing the source of es5-shim string.trim() :). The trick is that I don;t have any message ie crashes I mean that there is a popup which says that ie has crashed and send report or not: something like that: http://modernl.com/images/screenshots/internet-explorer-crash.jpg – Adrian Wajs Sep 25 '13 at 15:31
  • Are you trying to use less on the client side (developer mode) for ie8? Their website says they only support modern browsers which ie8 is not. – Kerry Liu Sep 25 '13 at 15:33
  • Yea I am using client side script for development... – Adrian Wajs Sep 25 '13 at 15:38

1 Answers1

1

If the only thing you're using es5-shim for is the trim polyfill, you could try not using es5-shim and include this alternate polyfill and see if it works

''.trim||(String.prototype.trim=function(){return this.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,'')});

That said, I'm using currently using es5-shim version ES-5 15.5.4.20 of String.trim() and less version v1.4.2 and they play nicely together in IE8-.

If you want to compare implementations, version I'm running has this code...

// ES5 15.5.4.20
// http://es5.github.com/#x15.5.4.20
var ws = "\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003" +
    "\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028" +
    "\u2029\uFEFF";
if (!String.prototype.trim || ws.trim()) {
    // http://blog.stevenlevithan.com/archives/faster-trim-javascript
    // http://perfectionkills.com/whitespace-deviations/
    ws = "[" + ws + "]";
    var trimBeginRegexp = new RegExp("^" + ws + ws + "*"),
        trimEndRegexp = new RegExp(ws + ws + "*$");
    String.prototype.trim = function trim() {
        if (this === void 0 || this === null) {
            throw new TypeError("can't convert "+this+" to object");
        }
        return String(this)
            .replace(trimBeginRegexp, "")
            .replace(trimEndRegexp, "");
    };
}
Stephen James
  • 1,277
  • 9
  • 17
  • I am using same version of trim taht you psoted and upgraded less to 1.4.2 and it still crashes... but only on native IE8 – Adrian Wajs Sep 26 '13 at 08:55
  • Ah ok, I use IE10 and set the standards mode to IE8 for preliminary testing while in dev, initially that caused a problem, but not after including es5-sham.js. Once I've completed dev and am doing compatibility testing I compile the less to CSS (in my case using a msbuild step and less dot net because I'm working on the MS stack) before I test against native IE8. Have you tried using the alternative shim instead of es5? Interested to know if it helps `''.trim||(String.prototype.trim=function(){return this.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,'')});` ? – Stephen James Sep 26 '13 at 09:32
  • I tried this polyfill too :)... I tried to find alternatives for es5-shim but I couldn't find anything... maybe you can give me a hint? – Adrian Wajs Sep 26 '13 at 09:58
  • I used my test VM for IE8 (downloadable from modern.ie). So its a standard XP machine running standard IE8. I made the simplest of tests running less, with es5 shim and it works. So I'm starting to think the issue may be in some ambient race condition - have you tried this with a dead simple example? Heres a gist for you to try if the background is yellow, less works with trim under IE8 with es5. https://gist.github.com/stephen-james/89a77604dfb8786b6c66 – Stephen James Sep 26 '13 at 10:47
  • maybe try put your less file in there and see what happens. It could be some syntax weirdness - are you using anything advanced in the less script or just basic functionality? alternatively IE has a limit to the size of CSS files it can process (as mentioned by some folk here http://stackoverflow.com/questions/12520666/ie8-9-maximum-bytes-for-css-file), if your file is massive it may be having problems with that? – Stephen James Sep 26 '13 at 11:23