joaquindiez
commented
10 years ago I did a small modification in the gridster code to fix that, I added an id to the css node generated, then I check if the node was previously generated to avoid added again
fn.add_style_tag = function(css) {
var d = document;
var current_css = $('#_gridster_auto_css');
if (current_css === 'undefined' || current_css.length == 0){
var tag = d.createElement('style');
d.getElementsByTagName('head')[0].appendChild(tag);
tag.setAttribute('type', 'text/css');
tag.setAttribute('id', '_gridster_auto_css');
if (tag.styleSheet) {
tag.styleSheet.cssText = css;
}else{
tag.appendChild(document.createTextNode(css));
}
this.$style_tags = this.$style_tags.add(tag);
}
return this;
};
And in the generate_stylesheet method
I deleted this code lines
// don't duplicate stylesheets for the same configuration
var serialized_opts = $.param(opts);
if ($.inArray(serialized_opts, Gridster.generated_stylesheets) >= 0) {
return false;
}
and add instead
$('#_gridster_auto_css').remove();
to be sure I was to generate a unique css.
Every time a widget is added dynamically, the stylesheet is reconstructed and added to the DOM (rather than replacing what's already there or building only the additional styles needed). After this happens a few times, the browser starts to have noticeable performance issues when dragging tiles around. If the redundant styles are not generated, the dragging behavior doesn't experience any performance penalty (using Chrome Version 31.0.1650.63 m).