What is in trouble now is the title, I confirmed with iPhone8, 6plus, 6 chrome and safari, for some reasonv-bindonlydata-textdoes not seem to be received by theattr functionof: before, and the display is corrupted.
And for some reason, the css specification is not effective.

If i look at the following image, you can see the actual behavior (this is a 6plus chrome).

Mobile display:
For some reason, the text before the pseudo-element is not displayed, andfont-sizeis also scattered.

Display on PC:
He/she is working as expected.

And the background written in the same code indisplayed after this title screen is displayed without any problem.

No error, and no matter how many times I reviewed the code myself, I couldn't find anything strange.
Please give me your help if you like.

Code for that part

Unrelated parts have been removed.
By the way, Vue'smixinis for vh settings for mobile browsers, andincludein Sass istext-shadowCentered code usingflexbox.

I will paste the code ofthat is displayed normally.
If it is included in the question text, it will be too long, so please excuse me with the github link.
https: // github.com/taku-hu/my-portfolio-site/blob/master/src/components/Header.vue

The following code is the code of the title screen inapp.vuedisplayed at the beginning.

<template>
  
    <transition name = "switch" mode = "out-in">
      
        
          <p v-for = "sentence in bgSentences": key = "sentence">
            <span: data-text = "sentence">{{sentence}}</span><!-* applicable section->
          </p>
        
         {{title}} 
      
      
        <header-component />
        <transition name = "switch">
          <router-view />
        </transition>
        <footer-component />
      
    </transition>
  
</template>

export default {
  name: 'App',
  mixins: [mobileBrowser],


  data () {
    return {
      bgSentences: [
       'Appropriate string for background', // This will be followed by 30 or so.],


    };
  },


  components: {
    HeaderComponent,
    FooterComponent
  }
};
</script>

html {
  font-size: calc (62.5% + 0.5vw);
}
body {
  font-family: 'Hiragino Kaku Gothic Pro', 'Hiragino Kaku Go Pro W3', 'Meirio',
    Meiryo, 'MS P Gothic', 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
// Slide animation for background
@keyframes slide {
  0% {
    transform: translateX (100%);
  }
  100% {
    transform: translateX (0);
  }
}
@keyframes slide-reverse {
  0% {
    transform: translateX (0);
  }
  100% {
    transform: translateX (100%);
  }
}