search

WyohKnott / image-formats-comparison

MIT License
18 stars 5 forks source link

Moving the splitter is very laggy in Firefox #6

Closed LMLB closed 6 years ago

LMLB commented 6 years ago

The slowness is caused by having a large data URI in an inline style for the image containers.

I tried changing the setSize function to put the background image in a style element instead, by replacing the line that sets el.style.backgroundImage with the code below:

var styleEl = getElId(side + "SideStyle");
if (styleEl == null) {
    styleEl = document.createElement("style");
    styleEl.id = side + "SideStyle";
    styleEl.textContent = "#" + el.id + "{}";
    document.head.appendChild(styleEl);
}
styleEl.sheet.cssRules[0].style.backgroundImage = 'url(\"' + src + '\")';

This fixed it in Firefox, and also made it slightly smoother in Chrome as well.