Ну, похоже, что у меня есть какая-то проблема с Firefox, я добавил логотип на свой сайт и стилизовал его через этот блок CSS:
#splash div.logo > a {
background-image: url("../../---.png");
background-size: 280px;
height: 85px;
width: 280px;
}
Когда я открываю веб-страницу с помощью Chrome или любого другого браузера, кроме Firefox, он отображает его в правильном направлении, если я не увеличил его, будет отображаться тонкая строка, при открытии веб-страницы из Firefox будет отображаться тонкая линия над изображением с увеличением или без увеличения.
Логотип анимируется через этот код:
IndexPage: {
Splash: {
init: function() {
var $splash = $('#splash'),
$logo = $splash.find('#logo'),
frame = 1,
frameCount = 46
framesPerSecond = 50;
function animateLogo() {
var lastTime = 0;
var currTime = new Date().getTime();
// var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var timeToCall = 25;
if (typeof requestAnimationFrame == "undefined")
requestAnimationFrame = function (callback, element) {
return setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
};
if (frame <= frameCount) {
setTimeout(function() {
requestAnimationFrame(animateLogo, $logo);
$logo.css('background-position', '0 -' + (frame * 85) + 'px');
frame += 1;
}, timeToCall);
// lastTime = currTime + timeToCall;
}
}
$('form.search').on({
close: function() { $splash.removeClass('searching'); },
open: function() { $splash.addClass('searching'); }
});
if ($window.width() >= 532) {
$window.scroll(function() {
var top = $window.scrollTop();
$splash.find('div.logo').css('opacity', top > 150 ? 0 : (150 - top) / 150);
});
}
$window.resize(function() {
if ($splash.width() < 768) {
$logo.css('background-position', '0 0');
} else {
$logo.css('background-position', '0 -3910px');
}
});
if ($window.width() >= 768)
animateLogo();
}
}
}
Любые идеи?