ローディング画面で検証モードと実機で表示の違いが出ている

実現したいこと

ローディングの画面を作っていて、上下左右中央に文字が表示されるように作ろうとしています。
PCブラウザの検証モードでSPサイズにして確認した時はちゃんと上下左右中央に文字が表示されるのですが、スマホ実機で確認すると若干右にずれて表示された後、ローディングが終わる直前に中央に移動するという現象が起きています。
修正しようとしたのですが理由がわからず困っています。

該当のソースコード

HTML
1<div class="loading__container">
2 <div class="loading__logo">
3  <p class="loading__text">
4   「おいしい」をあなたのもとへ届けます。
5  </p>
6 </div>
7</div>

CSS
1.loading {
2  &__container {
3    position: fixed;
4    width: 100%;
5    height: 100%;
6    text-align: center;
7    background: $white;
8    z-index: 99999;
9  }
10
11  &__logo {
12    position: absolute;
13    top: 50%;
14    left: 50%;
15    transform: translate(-50%, -50%);
16  }
17
18  &__text {
19    display: flex;
20    overflow: hidden;
21    writing-mode: vertical-rl;
22    @include fz_vw(36);
23    letter-spacing: 3.5px;
24    animation: 1.5s slide linear forwards;
25
26    @include responsive(tab) {
27      @include fz_vw(24);
28    }
29  }
30
31  @keyframes slide {
32    0% {
33      opacity: 0;
34    }
35
36    100% {
37      opacity: 1;
38    }
39  }
40}

JS
1$(window).on('load',function(){
2  $(".loading__logo").delay(2400).fadeOut('slow');
3  $(".loading__container").delay(2700).fadeOut('slow',function(){
4   $('body').addClass('appear');
5  });
6});