質問編集履歴

3

taremimi_7

taremimi_7 score 14

2018/06/05 11:29  投稿

スマホのスクロールで画面がチラつくのを防止したい
スクロールとともにボタンを画面外下に隠し、スクロールが終わるとまたひょこっと出現するボタンをつくっています。しかし、スマホで見るとこのアクション(ボタンが消える時と出現する際)で画面がチラつきます(スクロールとボタンがガクガクっとした挙動に)。
また同時に、背景のすかし画像も不具合を起こします。
[動作動画](https://youtu.be/FvDClYAZ57Q)
[動作動画](https://youtu.be/FvDClYAZ57Q) ←スマホで見るともっとガクガクっとなります
どなたか解決方法を教えていただけないでしょうか。
よろしくお願いいたします。
```
<%= link_to ***_path , class: "btn btn-primary btn-exhibit" do %>
  <i class="fa fa-plus"></i>
<% end %>
```
```coffeescript
$(document).on 'turbolinks:load', ->
    $('#main').scroll ->
      setTimeout ->
        $('.btn-exhibit').addClass('btn-hidden')
      , 200
    setTimeoutId = null
    $('#main').on 'scroll', ->
      if setTimeoutId
        clearTimeout(setTimeoutId)
      setTimeoutId = setTimeout ->
        $('.btn-exhibit').removeClass('btn-hidden')                                               
        setTimeoutId = null
      , 700
```
↓右下ボタン
```scss
.btn-exhibit {
   **省略**
   transition: bottom .4s ease, right .4s ease, transform .4s ease;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  &.btn-hidden {
    bottom: -45px;
  }
}
```
↓背景画像透かし
```scss
.item-list .item {
   overflow: hidden;
   a {
       width: 100%;
       height: 100%;
       margin: 0;
       border: none;
       border-radius: 0px;
       background-color: #ffffff;
       color: #000000;
       .thumbnail {
           z-index: 0;
           position: relative;
           text-align: center;
           height: 150px;
           width: 100%;
           font-size: 0;
           line-height: 0;
           padding: 0;
           margin: 0 auto;
           overflow: hidden;
           .thumbnail-bg {
               $blur: 30px;
               $blur-offset: 30px;
               /*まぶしくて明るい
       $saturation: 80%;
       $brightness: 250%;
       */
               $saturation: 150%;
               $brightness: 150%;
               /* 濃くてしっかり
       $saturation: 200%;
       $brightness: 100%;
       */
               z-index: 1;
               position: absolute;
               top: - $blur-offset;
               bottom: - $blur-offset;
               left: - $blur-offset;
               right: - $blur-offset;
               background-size: 100% 100%;
               &:before {
                   content: '';
                   background: inherit;
                   /*.bgImageで設定した背景画像を継承する*/
                   -webkit-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -moz-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -o-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -ms-filter: blur($blur) saturate($saturation) brightness($brightness);
                   filter: blur($blur) saturate($saturation) brightness($brightness);
                   position: absolute;
                   /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
                   top: -1 * $blur-offset;
                   left: -1 * $blur-offset;
                   right: -1 * $blur-offset;
                   bottom: -1 * $blur-offset;
                   z-index: -1;
                   /*重なり順序を一番下にしておく*/
               }
               &.sold-out:before {
                   -webkit-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -moz-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -o-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -ms-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
               }
           }
           img {
               z-index: 2;
               position: absolute;
               left: 50%;
               -webkit-transform: translateX(-50%);
               transform: translateX(-50%);
               width: auto;
               max-width: 100%;
               height: 100%;
               box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               &.sold-out {
                   -webkit-filter: grayscale(50%) saturate(30%);
                   -moz-filter: grayscale(50%) saturate(30%);
                   -o-filter: grayscale(50%) saturate(30%);
                   -ms-filter: grayscale(50%) saturate(30%);
                   filter: grayscale(50%) saturate(30%);
               }
           }
       }
       .item-info {
           border-top: solid .5px #e5e5e5;
           position: relative;
           margin: 0;
           height:56px;
           background-color:#F6F7F9;
           .item-name {
               display: block;
               font-weight: bold;
               text-align: center;
               padding: 0;
               margin: 0;
               line-height: 24px;
               font-size: 11px;
               height: 24px;
               overflow: hidden;
               background-color:#F6F7F9;
               &.sold-out {
                   color: #999999;
               }
           }
           .bookmark {
               display: block;
               position: absolute;
               line-height: 24px;
               left: 0px;
               bottom: 0px;
               padding-left: 8px;
               padding-bottom: 4px;
               color: #d9b86c;
               i::before {
                   content: "\f08a";
               }
               &:hover i:before {
                   content: "\f004";
               }
           }
           .price {
               &.sold-out {
                   color: #888888;
               }
           }
       }
   }
}
```
  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6008questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CoffeeScript

    143questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

2

taremimi_7

taremimi_7 score 14

2018/06/05 10:56  投稿

スマホのスクロールで画面がチラつくのを防止したい
スクロールとともにボタンを画面外下に隠し、スクロールが終わるとまたひょこっと出現するボタンをつくっています。しかし、スマホで見るとこのアクション(ボタンが消える時と出現する際)で画面がチラつきます(スクロールとボタンがガクガクっとした挙動に)。
また同時に、背景のすかし画像も不具合を起こします。
[動作動画](https://youtu.be/FvDClYAZ57Q)
どなたか解決方法を教えていただけないでしょうか。
よろしくお願いいたします。
```
<%= link_to ***_path , class: "btn btn-primary btn-exhibit" do %>
  <i class="fa fa-plus"></i>
<% end %>
```
```coffeescript
$(document).on 'turbolinks:load', ->
    $('#main').scroll ->
      setTimeout ->
        $('.btn-exhibit').addClass('btn-hidden')
      , 200
    setTimeoutId = null
    $('#main').on 'scroll', ->
      if setTimeoutId
        clearTimeout(setTimeoutId)
      setTimeoutId = setTimeout ->
        $('.btn-exhibit').removeClass('btn-hidden')                                               
        setTimeoutId = null
      , 700
```
↓右下ボタン
```scss
.btn-exhibit {
   **省略**
   transition: bottom .4s ease, right .4s ease, transform .4s ease;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  &.btn-hidden {
    bottom: -45px;
  }
}
```
↓背景透かし
↓背景画像透かし
```scss
.item-list .item {
   overflow: hidden;
   a {
       width: 100%;
       height: 100%;
       margin: 0;
       border: none;
       border-radius: 0px;
       background-color: #ffffff;
       color: #000000;
       .thumbnail {
           z-index: 0;
           position: relative;
           text-align: center;
           height: 150px;
           width: 100%;
           font-size: 0;
           line-height: 0;
           padding: 0;
           margin: 0 auto;
           overflow: hidden;
           .thumbnail-bg {
               $blur: 30px;
               $blur-offset: 30px;
               /*まぶしくて明るい
       $saturation: 80%;
       $brightness: 250%;
       */
               $saturation: 150%;
               $brightness: 150%;
               /* 濃くてしっかり
       $saturation: 200%;
       $brightness: 100%;
       */
               z-index: 1;
               position: absolute;
               top: - $blur-offset;
               bottom: - $blur-offset;
               left: - $blur-offset;
               right: - $blur-offset;
               background-size: 100% 100%;
               &:before {
                   content: '';
                   background: inherit;
                   /*.bgImageで設定した背景画像を継承する*/
                   -webkit-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -moz-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -o-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -ms-filter: blur($blur) saturate($saturation) brightness($brightness);
                   filter: blur($blur) saturate($saturation) brightness($brightness);
                   position: absolute;
                   /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
                   top: -1 * $blur-offset;
                   left: -1 * $blur-offset;
                   right: -1 * $blur-offset;
                   bottom: -1 * $blur-offset;
                   z-index: -1;
                   /*重なり順序を一番下にしておく*/
               }
               &.sold-out:before {
                   -webkit-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -moz-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -o-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -ms-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
               }
           }
           img {
               z-index: 2;
               position: absolute;
               left: 50%;
               -webkit-transform: translateX(-50%);
               transform: translateX(-50%);
               width: auto;
               max-width: 100%;
               height: 100%;
               box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               &.sold-out {
                   -webkit-filter: grayscale(50%) saturate(30%);
                   -moz-filter: grayscale(50%) saturate(30%);
                   -o-filter: grayscale(50%) saturate(30%);
                   -ms-filter: grayscale(50%) saturate(30%);
                   filter: grayscale(50%) saturate(30%);
               }
           }
       }
       .item-info {
           border-top: solid .5px #e5e5e5;
           position: relative;
           margin: 0;
           height:56px;
           background-color:#F6F7F9;
           .item-name {
               display: block;
               font-weight: bold;
               text-align: center;
               padding: 0;
               margin: 0;
               line-height: 24px;
               font-size: 11px;
               height: 24px;
               overflow: hidden;
               background-color:#F6F7F9;
               &.sold-out {
                   color: #999999;
               }
           }
           .bookmark {
               display: block;
               position: absolute;
               line-height: 24px;
               left: 0px;
               bottom: 0px;
               padding-left: 8px;
               padding-bottom: 4px;
               color: #d9b86c;
               i::before {
                   content: "\f08a";
               }
               &:hover i:before {
                   content: "\f004";
               }
           }
           .price {
               &.sold-out {
                   color: #888888;
               }
           }
       }
   }
}
```
  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6008questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CoffeeScript

    143questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

1

taremimi_7

taremimi_7 score 14

2018/06/05 09:31  投稿

スマホのスクロールで画面がチラつくのを防止したい
スクロールとともにボタンを画面外下に隠し、スクロールが終わるとまたひょこっと出現するボタンをつくっています。しかし、スマホで見るとこのアクション(ボタンが消える時と出現する際)で画面がチラつきます(スクロールとボタンがガクガクっとした挙動に)。
また同時に、背景のすかし画像も不具合を起こします。
[動作動画](https://youtu.be/FvDClYAZ57Q)  
どなたか解決方法を教えていただけないでしょうか。
よろしくお願いいたします。
```
<%= link_to ***_path , class: "btn btn-primary btn-exhibit" do %>
  <i class="fa fa-plus"></i>
<% end %>
```
```coffeescript
$(document).on 'turbolinks:load', ->
    $('#main').scroll ->
      setTimeout ->
        $('.btn-exhibit').addClass('btn-hidden')
      , 200
    setTimeoutId = null
    $('#main').on 'scroll', ->
      if setTimeoutId
        clearTimeout(setTimeoutId)
      setTimeoutId = setTimeout ->
        $('.btn-exhibit').removeClass('btn-hidden')                                               
        setTimeoutId = null
      , 700
```
↓右下ボタン
```scss
.btn-exhibit {
   **省略**
   transition: bottom .4s ease, right .4s ease, transform .4s ease;
   box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
  &.btn-hidden {
    bottom: -45px;
  }
}
```
↓背景透かし
```scss
.item-list .item {
   overflow: hidden;
   a {
       width: 100%;
       height: 100%;
       margin: 0;
       border: none;
       border-radius: 0px;
       background-color: #ffffff;
       color: #000000;
       .thumbnail {
           z-index: 0;
           position: relative;
           text-align: center;
           height: 150px;
           width: 100%;
           font-size: 0;
           line-height: 0;
           padding: 0;
           margin: 0 auto;
           overflow: hidden;
           .thumbnail-bg {
               $blur: 30px;
               $blur-offset: 30px;
               /*まぶしくて明るい
       $saturation: 80%;
       $brightness: 250%;
       */
               $saturation: 150%;
               $brightness: 150%;
               /* 濃くてしっかり
       $saturation: 200%;
       $brightness: 100%;
       */
               z-index: 1;
               position: absolute;
               top: - $blur-offset;
               bottom: - $blur-offset;
               left: - $blur-offset;
               right: - $blur-offset;
               background-size: 100% 100%;
               &:before {
                   content: '';
                   background: inherit;
                   /*.bgImageで設定した背景画像を継承する*/
                   -webkit-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -moz-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -o-filter: blur($blur) saturate($saturation) brightness($brightness);
                   -ms-filter: blur($blur) saturate($saturation) brightness($brightness);
                   filter: blur($blur) saturate($saturation) brightness($brightness);
                   position: absolute;
                   /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
                   top: -1 * $blur-offset;
                   left: -1 * $blur-offset;
                   right: -1 * $blur-offset;
                   bottom: -1 * $blur-offset;
                   z-index: -1;
                   /*重なり順序を一番下にしておく*/
               }
               &.sold-out:before {
                   -webkit-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -moz-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -o-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   -ms-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
                   filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%);
               }
           }
           img {
               z-index: 2;
               position: absolute;
               left: 50%;
               -webkit-transform: translateX(-50%);
               transform: translateX(-50%);
               width: auto;
               max-width: 100%;
               height: 100%;
               box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15);
               &.sold-out {
                   -webkit-filter: grayscale(50%) saturate(30%);
                   -moz-filter: grayscale(50%) saturate(30%);
                   -o-filter: grayscale(50%) saturate(30%);
                   -ms-filter: grayscale(50%) saturate(30%);
                   filter: grayscale(50%) saturate(30%);
               }
           }
       }
       .item-info {
           border-top: solid .5px #e5e5e5;
           position: relative;
           margin: 0;
           height:56px;
           background-color:#F6F7F9;
           .item-name {
               display: block;
               font-weight: bold;
               text-align: center;
               padding: 0;
               margin: 0;
               line-height: 24px;
               font-size: 11px;
               height: 24px;
               overflow: hidden;
               background-color:#F6F7F9;
               &.sold-out {
                   color: #999999;
               }
           }
           .bookmark {
               display: block;
               position: absolute;
               line-height: 24px;
               left: 0px;
               bottom: 0px;
               padding-left: 8px;
               padding-bottom: 4px;
               color: #d9b86c;
               i::before {
                   content: "\f08a";
               }
               &:hover i:before {
                   content: "\f004";
               }
           }
           .price {
               &.sold-out {
                   color: #888888;
               }
           }
       }
   }
}
```
  • JavaScript

    17003questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • CSS

    6008questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • CoffeeScript

    143questions

    CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る