カスタムデータ属性のv-bindがモバイル端末でのみ動作していない。

Question

いつもお世話になっております。
今困っていることはタイトル通りでして、iPhone8, 6plus, 6のchromeとsafariで確認した所、何故かモバイル端末でのみv-bindしたdata-textが上手く:beforeのattr関数で受け取れていないようで、表示が崩れてしまっています。
そして何故かcssの指定も効いていません。

実際の挙動については以下の画像をご覧いただくとわかりやすいと思います（こちらは6plusのchromeでのものになります）。

モバイルでの表示：
何故か擬似要素beforeでのテキストが表示されておらず、font-sizeもばらばらになってしまっています。

PCでの表示：
期待した動作をしてくれています。

そしてこのタイトル画面の後に表示される<header-component/>内の同じコードで書かれた背景は何故か問題なく表示されています。

エラーは出ていませんし、自分で何度コードを見直してもおかしなところは見つけられませんでした。
皆様、よろしければお力添えをお願いいたします。

該当部分のコード

関係ない部分は削ってあります。
ちなみにVueのmixinはモバイルブラウザ用のvh設定用のもので、Sassでincludeしているのは、text-shadowを付けるものとflexboxを使った中央揃えのコードです。

それと一応、正常に表示されている方の<header-component/>のコードも貼らせていただきます。
質問文内に記載するとあまりに長くなってしまうので、githubのリンクで失礼させて下さい。
https://github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue

以下のコードをは一番初めに表示される、app.vue内のタイトル画面のコードです。

<template>
  <div id="app">
    <transition name="switch" mode="out-in">
      <div v-if="!titleCall" key="title" class="title-call">
        <div class="background">
          <p v-for="sentence in bgSentences" :key="sentence">
            <span :data-text="sentence">{{ sentence }}</span> <!-- ※該当箇所 -->
          </p>
        </div>
        <h1>{{ title }}</h1>
      </div>
      <div v-else key="contents" class="contents">
        <header-component />
        <transition name="switch">
          <router-view/>
        </transition>
        <footer-component/>
      </div>
    </transition>
  </div>
</template>

export default {
  name: 'App',
  mixins: [mobileBrowser],
  data() {
    return {
      bgSentences: [
       '背景用の適当な文字列', //この後30個ほど続きます。
      ],
    };
  },
  components: {
    HeaderComponent,
    FooterComponent
  }
};
</script>

html {
  font-size: calc(62.5% + 0.5vw);
}
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ',
    Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
#app {
  @include center-styling;
  text-align: center;
  overflow: hidden;

  .title-call {
    @include center-styling;
    position: relative;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-color: rgb(15, 54, 167);
    background-image: linear-gradient(90deg, rgba(15, 54, 167, 1) 40%, rgba(0, 163, 254, 1) 100%);
    overflow: hidden;
    .background {
      position: absolute;
      top: 0;
      left: 0;
      white-space: nowrap;
      user-select: none;
      p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.3);
        transition: 0.5s;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        span {
          position: relative;
          display: inline-block;
          padding: 5px 0 5px 5px;
          letter-spacing: 1px;
          &:before {
            content: attr(data-text); //※該当箇所
            position: absolute;
            top: 0;
            left: -100%;
            padding: 5px 0 5px 5px;
          }
        }
        &:nth-child(odd) span {
          animation: slide 20s linear infinite;
        }
        &:nth-child(even) span {
          animation: slide-reverse 20s linear infinite;
        }
      } //p
    } //.background
    h1 {
      @include txt-neon-shadow;
      font-family: 'Orbitron', sans-serif;
      font-size: 5rem;
      font-weight: bold;
      color: #fff;
    }
  } //.title-call

  .contents {
    @include center-styling;
    width: 100%;
    section {
      @include center-styling;
      width: 100%;
    }
    a {
      text-decoration: none;
    }
  } //.contents
} //#app

//背景用スライドアニメーション
@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide-reverse {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

Comments

[yambejp]

imgur.comはセキュリティエラーがでるので画像は直接貼ったほうがよいのでは？
モバイルとは各種OS、ブラウザで横断的にしらべたのでしょうか？
特定のOS、ブラウザの問題なのでしょうか？

[take-t.t.]

ご指摘ありがとうございます。
質問文に情報を追記させていただきました。

ただgifが2MB以下にする事が難しいので一旦画像はこのままとさせてください。

[yambejp]

gifの制限はわかりましたが、リンク先は見ることができません
jpegかなにかで手書きでいいので図示したほうがよいでしょう

[take-t.t.]

申し訳ありません、imgurがセキュリティエラーで見れないことを考慮していませんでした。
gifを静止画に変更し、説明を追記させていただきました。

[FKM]

v-bind:data-textを:data-textと省略記法にしても駄目でしょうか？

[take-t.t.]

現在は全て省略記法になっているのですが相変わらずうまく表示できておりません...

[FKM]

同じCSSを読み込んでいるのでしょうか？表示されているページとされていないページに記述されているCSSをwinmergeなどで比較しても差違は出てませんか？

[take-t.t.]

cssは別ですが、背景描画部分は全く同じコードです。

Answer 1

.title-call内のh1を、position: absoluteを指定してz-indexを.backgroundより上げた画面いっぱいに引き伸ばされたdivで囲んだ所、モバイルブラウザでも正常に表示されるようになり、一応解決しました。
ただ、肝心のv-bindが効いていなかった背景部分のコードは一切弄っておらず、そのdivが無かった場合、何故PCはOKでモバイルでは駄目なのか、それがVueの挙動にどう関係するのか理由がよく分かりませんでした。

コメントを下さった皆様、ありがとうございました。