モバイルビューポートで断続的に問題が発生しました

Question

残念ながら、私は以下のことを申し訳なく思っていますが、今は自分自身を修正して助けを求めています。

スクリーンショットの問題を説明する：

http://crazy-pixels.co.uk/test/img/1.PNG http://crazy-pixels.co.uk/test/img/2.PNG

は基本的に、時にはWebページはモバイル罰金に動作し、あなただけにせずにその一部を見るように、時々のすべてが右にずれています水平スクロール。ページを4〜5回更新すると、通常はモバイルビューに戻ります。

ウェブリンクはhttp://crazy-pixels.co.uk/test/です。この問題は、以下のCSSではなく、テキストアニメーション用のJSに入れてください。

おかげ

/* Google fonts & font family 
==================================================*/ 
@import url(font-awesome.min.css); 
@import url(https://fonts.googleapis.com/css?family=Muli); 
@import url(https://fonts.googleapis.com/css?family=Poppins:400,500,600,700); 

/* General 
==================================================*/ 

html, 
body { 
    height: 100%; 
    font-family: 'Poppins', sans-serif; 
    line-height: 1.8; 
    color: #999 

} 

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
} 

.no-padding [class^="col-"] { 
    padding-left: 0; 
    padding-right: 0; 
} 

.main-container { 
    padding: 100px 0; 
} 

.center { 
    text-align: center; 
} 

a { 
    -webkit-transition: all .3s; 
    transition: all .3s 
} 

.uppercase { 
    text-transform: uppercase; 
} 

.h-30 { 
    height: 30px 
} 

.h-10 { 
    height: 10px 
} 

.color { 
    color: #02FA79; 
    font-size: 11px; 
} 


/* typography 
==================================================*/ 

h1 { 
    color: #393939; 
    font-size: 60px; 
    text-transform: uppercase; 
} 

h3 { 
    color: #393939; 
} 

h5 { 
    color: #02FA79; 
} 


/* preloader 
==================================================*/ 

#preloader { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #f5f5f5; 
    /* change if the mask should be a color other than white */ 
    z-index: 1000; 
    /* makes sure it stays on top */ 
} 

.pre-container { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    bottom: auto; 
    right: auto; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    text-align: center; 
} 

.spinner { 
    width: 40px; 
    height: 40px; 
    position: relative; 
    margin: 100px auto; 
} 

.double-bounce1, 
.double-bounce2 { 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color: #02FA79; 
    opacity: 0.6; 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-animation: bounce 2.0s infinite ease-in-out; 
    animation: bounce 2.0s infinite ease-in-out; 
} 

.double-bounce2 { 
    -webkit-animation-delay: -1.0s; 
    animation-delay: -1.0s; 
} 

@-webkit-keyframes bounce { 
    0%, 
    100% { 
     -webkit-transform: scale(0.0) 
    } 
    50% { 
     -webkit-transform: scale(1.0) 
    } 
} 

@keyframes bounce { 
    0%, 
    100% { 
     transform: scale(0.0); 
     -webkit-transform: scale(0.0); 
    } 
    50% { 
     transform: scale(1.0); 
     -webkit-transform: scale(1.0); 
    } 
} 





/* box-intro 
==================================================*/ 

.box-intro { 
    text-align: center; 
    display: table; 
    height: 100vh; 
    width: 100%; 
} 

.box-intro .table-cell { 
    display: table-cell; 
    vertical-align: middle; 
} 

.box-intro em { 
    font-style: normal; 
    text-transform: uppercase 
} 

b i:last-child { 
    color: #02FA79 !important; 
} 

.box-intro h5 { 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    color: #999; 
    line-height: 1.7 
} 


/* mouse effect */ 

.mouse { 
    position: absolute; 
    width: 22px; 
    height: 42px; 
    bottom: 40px; 
    left: 50%; 
    margin-left: -12px; 
    border-radius: 15px; 
    border: 2px solid #888; 
    -webkit-animation: intro 1s; 
    animation: intro 1s; 
} 

.scroll { 
    display: block; 
    width: 3px; 
    height: 3px; 
    margin: 6px auto; 
    border-radius: 4px; 
    background: #888; 
    -webkit-animation: finger 2s infinite; 
    animation: finger 2s infinite; 
} 

@-webkit-keyframes intro { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateY(40px); 
     transform: translateY(40px); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(0); 
     transform: translateY(0); 
    } 
} 

@keyframes intro { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateY(40px); 
     transform: translateY(40px); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateY(0); 
     transform: translateY(0); 
    } 
} 

@-webkit-keyframes finger { 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: translateY(20px); 
     transform: translateY(20px); 
    } 
} 

@keyframes finger { 
    0% { 
     opacity: 1; 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: translateY(20px); 
     transform: translateY(20px); 
    } 
} 


/* text rotate */ 

.box-headline { 
    font-size: 130px; 
    line-height: 1.0; 
} 

.box-words-wrapper { 
    display: inline-block; 
    position: relative; 
} 

.box-words-wrapper b { 
    display: inline-block; 
    position: absolute; 
    white-space: nowrap; 
    left: 0; 
    top: 0; 
} 

.box-words-wrapper b.is-visible { 
    position: relative; 
} 

.no-js .box-words-wrapper b { 
    opacity: 0; 
} 

.no-js .box-words-wrapper b.is-visible { 
    opacity: 1; 
} 

.box-headline.rotate-2 .box-words-wrapper { 
    -webkit-perspective: 300px; 
    perspective: 300px; 
} 

.box-headline.rotate-2 i, 
.box-headline.rotate-2 em { 
    display: inline-block; 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.box-headline.rotate-2 b { 
    opacity: 0; 
} 

.box-headline.rotate-2 i { 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transform: translateZ(-20px) rotateX(90deg); 
    transform: translateZ(-20px) rotateX(90deg); 
    opacity: 0; 
} 

.is-visible .box-headline.rotate-2 i { 
    opacity: 1; 
} 

.box-headline.rotate-2 i.in { 
    -webkit-animation: box-rotate-2-in 0.4s forwards; 
    animation: box-rotate-2-in 0.4s forwards; 
} 

.box-headline.rotate-2 i.out { 
    -webkit-animation: box-rotate-2-out 0.4s forwards; 
    animation: box-rotate-2-out 0.4s forwards; 
} 

.box-headline.rotate-2 em { 
    -webkit-transform: translateZ(20px); 
    transform: translateZ(20px); 
} 

.no-csstransitions .box-headline.rotate-2 i { 
    -webkit-transform: rotateX(0deg); 
    transform: rotateX(0deg); 
    opacity: 0; 
} 

.no-csstransitions .box-headline.rotate-2 i em { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
} 

.no-csstransitions .box-headline.rotate-2 .is-visible i { 
    opacity: 1; 
} 

@-webkit-keyframes box-rotate-2-in { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(90deg); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(-10deg); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(0deg); 
    } 
} 

@keyframes box-rotate-2-in { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(90deg); 
     transform: translateZ(-20px) rotateX(90deg); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(-10deg); 
     transform: translateZ(-20px) rotateX(-10deg); 
    } 
    100% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(0deg); 
     transform: translateZ(-20px) rotateX(0deg); 
    } 
} 

@-webkit-keyframes box-rotate-2-out { 
    0% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(0); 
    } 
    60% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(-100deg); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(-90deg); 
    } 
} 

@keyframes box-rotate-2-out { 
    0% { 
     opacity: 1; 
     -webkit-transform: translateZ(-20px) rotateX(0); 
     transform: translateZ(-20px) rotateX(0); 
    } 
    60% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(-100deg); 
     transform: translateZ(-20px) rotateX(-100deg); 
    } 
    100% { 
     opacity: 0; 
     -webkit-transform: translateZ(-20px) rotateX(-90deg); 
     transform: translateZ(-20px) rotateX(-90deg); 
    } 
} 




/* footer 
==================================================*/ 

footer { 
    padding: 30px 0; 
    text-align: center; 
    background: #f5f5f5 
} 

.copyright { 
    color: #ccc; 
    margin-bottom: 0; 
} 

footer img { 
    margin: 0 auto; 
} 


/* backto top 
==================================================*/ 

.cd-top { 
    display: inline-block; 
    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 20px; 
    line-height: 40px; 
    font-size: 20px; 
    right: 10px; 
    text-align: center; 
    color: #fff; 
    background: #02FA79; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 

.cd-top.cd-is-visible, 
.cd-top.cd-fade-out, 
.no-touch .cd-top:hover { 
    -webkit-transition: opacity .3s 0s, visibility 0s 0s; 
    transition: opacity .3s 0s, visibility 0s 0s; 
} 

.cd-top.cd-is-visible { 
    /* the button becomes visible */ 
    visibility: visible; 
    opacity: 1; 
} 

.cd-top.cd-fade-out { 
    opacity: .5; 
} 

.no-touch .cd-top:hover, 
.no-touch .cd-top:focus { 
    background-color: #02FA79; 
    opacity: 1; 
    color: #fff; 
} 


/* About page 
==================================================*/ 

.top-bar { 
    color: #333; 
    padding: 150px 0 150px; 
    background: -webkit-linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg); 
    background: linear-gradient(rgba(255, 255, 255, .8), rgba(255, 255, 255, .8)), url(../img/01.jpg); 
    background-size: cover; 
    background-attachment: fixed; 
    background-position: center center; 
    text-align: center; 
} 

.top-bar h1 { 
    font-size: 60px; 
    text-transform: uppercase; 
    font-weight: 700; 
    color: #999; 
    line-height: 50px; 
} 

.top-bar p { 
    font-size: 15px; 
    text-transform: uppercase; 
    font-weight: 500; 
    color: #777; 
} 

.top-bar p a { 
    color: #777; 
} 

.top-bar p a:hover, 
.top-bar p a:focus { 
    color: #555; 
    text-decoration: none; 
} 

.social-ul { 
    list-style: none; 
    display: inline-block; 
    padding-left: 0; 
} 

.social-ul li { 
    margin: 0 10px; 
    float: left; 
} 

.social-ul li a { 
    font-size: 25px; 
    color: #555; 
    -webkit-transition: all .3s; 
    transition: all .3s; 
} 

.social-ul li a:hover { 
    color: #888; 
} 


/* Services page 
==================================================*/ 

.size-50 { 
    font-size: 50px; 
} 

.service-box { 
    margin-bottom: 30px; 
} 

.service-box h3 { 
    margin-top: 0; 
} 


/* contact page 
==================================================*/ 

.details-text i { 
    margin-right: 10px; 
} 

.textarea-contact { 
    height: 200px; 
    width: 100%; 
    border: solid 1px rgba(0, 0, 0, .1); 
    position: relative; 
} 

.textarea-contact textarea { 
    height: 100%; 
    width: 100%; 
    border: 0; 
    padding: 20px; 
    background-color: transparent; 
    float: left; 
    z-index: 2; 
    font-size: 14px; 
    color: #9a9a9a; 
    resize: none; 
} 

.textarea-contact > span { 
    position: absolute; 
    top: 20px; 
    left: 20px; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #cdcdcd; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    z-index: 1; 
} 

.input-contact { 
    height: 40px; 
    width: 100%; 
    border: solid 1px rgba(0, 0, 0, .1); 
    position: relative; 
    margin-bottom: 30px; 
} 

.input-contact input[type="text"] { 
    height: 100%; 
    width: 100%; 
    border: 0; 
    padding: 0 20px; 
    float: left; 
    position: relative; 
    background-color: transparent; 
    z-index: 2; 
    font-size: 14px; 
    color: #9a9a9a; 
} 

.input-contact > span { 
    position: absolute; 
    top: 50%; 
    left: 20px; 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #cdcdcd; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    z-index: 1; 
} 

.input-contact > span.active, 
.textarea-contact > span.active { 
    color: #02FA79; 
    font-size: 10px; 
    top: 0px; 
    left: 5px; 
    background-color: #fff; 
    padding: 5px 
} 

input:focus, 
textarea:focus { 
    outline: none; 
} 

.contact-info { 
    margin-top: 20px; 
} 

.contact-info i { 
    height: 30px; 
    width: 30px; 
    display: inline-block; 
    background: #02FA79; 
    text-align: center; 
    line-height: 33px; 
    margin-right: 10px; 
    color: #fff; 
    font-size: 21px; 
} 

.contact-info p { 
    display: inline-block; 
    margin-right: 20px; 
} 

.btn-box { 
    background: #02FA79; 
    padding: 10px 50px; 
    border-radius: 0; 
    color: #fff; 
    margin-top: 20px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-weight: 500; 
} 

.btn-box:hover, 
.btn-box:focus { 
    background: #F5B700; 
    color: #fff; 
} 


/* single project page 
==================================================*/ 

.cat-ul { 
    padding-left: 0; 
    list-style: none 
} 

.cat-ul li i { 
    margin-right: 10px; 
    color: #02FA79; 
} 


/* Responsive media queries 
==================================================*/ 

@media (max-width: 991px) { 
    .portfolio .categories-grid span { 
     margin-bottom: 0; 
     text-align: center; 
     width: 100%; 
    } 
    .portfolio .categories-grid .categories ul li { 
     text-align: center; 
    } 
    .portfolio .categories-grid .categories ul li a { 
     margin-left: 0; 
    } 
    .col-md-6 h3 { 
     margin-top: 30px; 
    } 
} 

@media only screen and (max-width: 670px) { 
    .box-headline { 
     font-size: 100px; 
    } 
    .box-intro h5 { 
     font-size: 12px; 
    } 
    .box-primary-nav a { 
     padding: 5px 1em; 
     font-size: 14px; 
    } 
    .box-primary-nav { 
     padding: 80px 0 0; 
    } 
    .box-primary-nav .box-social a { 
     font-size: 23px; 
    } 
    .top-bar h1 { 
     font-size: 40px; 
     line-height: 30px; 
    } 
    .portfolio .categories-grid .categories ul li { 
     float: none; 
    } 
} 

@media only screen and (max-width: 520px) { 
    .box-headline { 
     font-size: 80px; 
    } 
    .box-intro h5 { 
     font-size: 12px; 
    } 
    .main-container { 
     padding: 50px 0; 
    } 
} 

@media only screen and (max-width: 420px) { 
    .box-headline { 
     font-size: 50px; 
    } 
    .box-intro h5 { 
     font-size: 12px; 
    } 
    .top-bar h1 { 
     font-size: 30px; 
     line-height: 30px; 
    } 


} 

    <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"> 


    <section class="box-intro"> 
     <div class="table-cell"> 
        <h1 class="box-headline letters rotate-2"> 
         <span class="box-words-wrapper"> 
          <b class="is-visible">design.</b> 
          <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;coding.</b> 
          <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;graphics.</b> 
           <b>imagination.</b> 

        </span> 
        </h1> 
        <h5>The perfect combination to your websites success </h5> 
       </div> 
       </div> 
      </section> 

Answer 1

表示：テーブルが問題を引き起こしているようです。表示ブロックに変更すると、要素の幅を制御することができます。

更新：.box-words-wrapperが問題を引き起こしていました。以下にCSSルールが追加されました。

.box-intro { 
    text-align: center; 
    display: block; 
    height: 100vh; 
    width: 100%; 
} 
.box-intro .table-cell { 
    display: block; 
    vertical-align: middle; 
} 
.box-words-wrapper { 
    display: inline-block; 
    position: relative; 
    width: 100%!important; 
}