Что это за сдвиг?

Question

[Darkness]

Просто не понимаю, почему он где-то сбоку появляется. Если убрать bottom и right то вовсе исчезает

<script>
    $(window).on('load', function () {
    var $preloader = $('#page-preloader'),
        $spinner   = $preloader.find('.spinner');
    $spinner.fadeOut();
    $preloader.delay(350).fadeOut('slow');
});
    </script>

<style>
    #page-preloader {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

    #page-preloader .spinner {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff url('prelouder3.gif') no-repeat center center;
}
    </style>

Answer 1

[holfza]

Полагаю, надо вместо:

right: 0;
bottom: 0;

добавить:

width: 100%;
height: 100%;

И для спиннера, чтоб было по центру:
transform: translate(-50%, -50%)

Comments

[Darkness]

5 сек и гляну

[Darkness]

Да, все ок, но качество съело чуток, плюс сверхку полосочка появилась

[holfza]

Антон Добрынин, что значит "съело" ?

[Darkness]

holfza, возможно, мое зрение меня обманывает (из-за полосочки сверху) в размере 1-2px

[holfza]

Антон Добрынин, А зачем вам блок .spinner? Фон и гифку ведь можно для #page-preloader задать (а в идеале для .page-preloader). Стили для айди как-то не очень.

[Darkness]

holfza, ну не знаю, по счет стилей, не думаю что какие-то жесткие требования по поводу "Стилизации" айди есть, в колличестве да. Сейчас гляну, спс

[Darkness]

holfza, вы были правы! осталась только та лишняя, черная, маленькая полосочка сверху