QUOTA_EXCEEDED_ERR: DOM Exception 22 with client-side Less

[greghouston]

In Firefox, Internet Explorer, and Chrome I regularly get the following error displayed at the top of my pages using client-side Less CSS.

QUOTA_EXCEEDED_ERR: DOM Exception 22
http://192.168.0.174:8000/static/css/dbe8f87e058b.css

In Firefox this error appears less frequently, but instead makes the browser window go black instead of displaying the error message. The browser has to be restarted at this point. Memory usage in Firefox is usually at about 2.6GB when this occurs, which is amazingly high. Chrome does not have the same memory issue, but still displays the above error on the pages.

[greghouston]

This is an error that occurs when the Web Storage Quota is exceeded. Clearing browsing data in the browser will remove the error ... until the quota is exceeded once again. The more changes that are made to the CSS, the sooner the quota seems to be exceeded.

[taivu]

i get the same error on the ipad with a medium sized .less file, but resetting the cache through settings doesnt get rid of the error.

[ttfkam]

As @greghouston points out, the expiry of older CSS builds is an issue.

I am curious about the 2.6GB of memory usage and how Less could cause that kind of memory leak from page to page. Unless you were calling less.refresh() over and over on the same page -- though again, I don't know of any specific bug about that -- I am very curious as to how this is happening.

[taivu]

i was making changes to the .less file and saving. then refreshing on the ipad. Im not sure if thats a less.refresh() or not.

[Fresheyeball]

This may be a side note. But I just noticed the error goes away if I leave private browsing on the iPad.

[ttfkam]

@Fresheyeball: That makes sense since private browsing always starts with a clean slate and leaves nothing behind. That would be try on any browser on mobile or desktop that supports private browsing.

[Fresheyeball]

@ttfkam totally. I just wanted to make mention in-case it helps anyone.

[tkane2000]

Does it seem weird to anyone that the error mentions the ".css" or the ".less" file instead of the LESS js file (such as less-1.2.1.min.js)? The CSS/LESS shouldn't do anything except get compiled by the js. Maybe it's a bug in which the browser is trying to render the LESS code as CSS?

I suppose the ultimate answer is to just compile it on the server side.

[pgdesjardins]

I concur with @Fresheyeball
Turning off private browsing solves the issue on iphone 4s.
Incognito window on Chrome do not have this issue.

[Fresheyeball]

@pgdesjardins Just for the record, I am now firmly against using in browser less rendering. We should always be doing it with preprocess and sending rendered css to the browser instead. With new tools like 'codekit' there is really no excuse.

[pgdesjardins]

@Fresheyeball
I totally agree with you... I usually run dotless (for .net) or winless on my desktop.
I was testing a prototype on mobile browsers.

[sym3tri]

+1
getting this too

[lukeapage]

Added try-catch to at least stop throwing an error. Could do with working out good cache policy - clearing/removing items instead of always adding them.

[Fresheyeball]

@agatronic the value that less provides is not worth risking it, or having to implement a separate error management scheme. Just pre-process and be done with it.

[lukeapage]

good point.. +1 to remove caching

[ZetIsDeadBaby]

This partly helps, not working for IE9

function destroyLessCache(pathToCss) { // e.g. '/css/' or '/stylesheets/'
    if (!window.localStorage || !less || less.env !== 'development') {
        return;
    }
    var host = window.location.host;
    var protocol = window.location.protocol;
    var keyPrefix = protocol + '//' + host + pathToCss;

    for (var key in window.localStorage) {
        if (key.indexOf(keyPrefix) === 0) {
            delete window.localStorage[key];
        }
    }
}

[infernoboy]

Not sure if it's relevant here, but the quota issue occurs within Safari extensions also. LESS files from within an extension are re-cached every time the extension is reloaded. This is because the extension URL always changes to ensure it is unpredictable (e.g. safari-extension://JSB5/bed9d148/, where the last part changes every reload) A way to disable the localStorage caching would be greatly beneficial for this case as the files are always local anyway.

[matthew-dean]

I'm confused how this issue was happening in the first place. A compiled CSS file shouldn't exceed any localstorage limits for a particular domain.