Почему блок не занимает 100% ширины при загрузке страницы?

Question

[Yevhenii K]

Есть простой preloader, проблема в том что при загрузке страницы на моб. устройствах блок занимает больше 100% из за чего выглядит криво. Происходит это в первые секунды закгрузки после все блок принимает 100%. Из за чего это возникает и как исправить?

.b-preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: $white;
  text-align: center;
  overflow: hidden;
  &::before {
    content: 'Загрузка . . .';
    position: absolute;
    z-index: 1001;
    top: calc(50% + 20px);
    left: 0;
    right: 0;
    width: 150px;
    text-align: center;
    margin: auto;
    padding-left: 25px;
    }
  &::after {
    content: '';
    position: absolute;
    z-index: 1001;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    height: 30px;
    width: 30px;
    border: 5px solid rgba(60, 60, 180, 0.45);
    border-top: 5px solid rgb(60, 60, 180);
    border-radius: 30px;
    animation: rotate 1s infinite linear;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

Comments

[Алексей]

Стили как подключены?

[Yevhenii K]

Одним файлом в head. Так же пробывал вставлять стили для preloader через тэг style, но таже проблема.

Answer 1

[Sergey Vish]

Try: width: 100vw; height: 100vh; max-width: 100vw; max-height:100vh;

Answer 2

[ink]

не видно в css вот это :

margin:0;
padding:0;

Comments

[Yevhenii K]

Не помогло