Having an issue with a loading image in Chrome, while it displays correctly in Safari and Firefox. In Chrome, I see two half-loading images instead of one whole image. Struggling to find a solution for this problem, any assistance would be greatly appreciated.
Here is the HTML code:
<div class="execute-actions">
<div class="loading"></div>
</div>
And here is the CSS:
.loading {
position: relative;
background: url("../../assets/img/core/loading.gif");
background-position: 912px 0px;
width: 48px;
height: 48px;
}
This part of the JS references the loading animation:
$(window).ready(function () {
if ($("html[data-useragent*='MSIE 8']").length) {
if ($("div.loading")) {
setInterval(function () {
$("div.loading").css({"background-position-x": "-=48px" });
}, 35);
}
} else {
if ($("div.loading")) {
setInterval(function () {
$("div.loading").css({"background-position": "-=48px" });
}, 35);
}
}