スクロールとともにボタンを画面外下に隠し、スクロールが終わるとまたひょこっと出現するボタンをつくっています。しかし、スマホで見るとこのアクション(ボタンが消える時と出現する際)で画面がチラつきます(スクロールとボタンがガクガクっとした挙動に)。
また同時に、背景のすかし画像も不具合を起こします。
動作動画 ←スマホで見るともっとガクガクっとなります
どなたか解決方法を教えていただけないでしょうか。
よろしくお願いいたします。
<%= link_to ***_path , class: "btn btn-primary btn-exhibit" do %> <i class="fa fa-plus"></i> <% end %>
coffeescript
1 $(document).on 'turbolinks:load', -> 2 $('#main').scroll -> 3 setTimeout -> 4 $('.btn-exhibit').addClass('btn-hidden') 5 , 200 6 setTimeoutId = null 7 $('#main').on 'scroll', -> 8 if setTimeoutId 9 clearTimeout(setTimeoutId) 10 setTimeoutId = setTimeout -> 11 $('.btn-exhibit').removeClass('btn-hidden') 12 setTimeoutId = null 13 , 700
↓右下ボタン
scss
1 2.btn-exhibit { 3 **省略** 4 transition: bottom .4s ease, right .4s ease, transform .4s ease; 5 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 6 &.btn-hidden { 7 bottom: -45px; 8 } 9}
↓背景画像透かし
scss
1.item-list .item { 2 overflow: hidden; 3 a { 4 width: 100%; 5 height: 100%; 6 margin: 0; 7 border: none; 8 border-radius: 0px; 9 background-color: #ffffff; 10 color: #000000; 11 .thumbnail { 12 z-index: 0; 13 position: relative; 14 text-align: center; 15 height: 150px; 16 width: 100%; 17 font-size: 0; 18 line-height: 0; 19 padding: 0; 20 margin: 0 auto; 21 overflow: hidden; 22 .thumbnail-bg { 23 $blur: 30px; 24 $blur-offset: 30px; 25 /*まぶしくて明るい 26 $saturation: 80%; 27 $brightness: 250%; 28 */ 29 $saturation: 150%; 30 $brightness: 150%; 31 /* 濃くてしっかり 32 $saturation: 200%; 33 $brightness: 100%; 34 */ 35 z-index: 1; 36 position: absolute; 37 top: - $blur-offset; 38 bottom: - $blur-offset; 39 left: - $blur-offset; 40 right: - $blur-offset; 41 background-size: 100% 100%; 42 &:before { 43 content: ''; 44 background: inherit; 45 /*.bgImageで設定した背景画像を継承する*/ 46 -webkit-filter: blur($blur) saturate($saturation) brightness($brightness); 47 -moz-filter: blur($blur) saturate($saturation) brightness($brightness); 48 -o-filter: blur($blur) saturate($saturation) brightness($brightness); 49 -ms-filter: blur($blur) saturate($saturation) brightness($brightness); 50 filter: blur($blur) saturate($saturation) brightness($brightness); 51 position: absolute; 52 /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/ 53 top: -1 * $blur-offset; 54 left: -1 * $blur-offset; 55 right: -1 * $blur-offset; 56 bottom: -1 * $blur-offset; 57 z-index: -1; 58 /*重なり順序を一番下にしておく*/ 59 } 60 &.sold-out:before { 61 -webkit-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%); 62 -moz-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%); 63 -o-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%); 64 -ms-filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%); 65 filter: blur($blur) saturate($saturation) brightness(200%) grayscale(100%); 66 } 67 } 68 img { 69 z-index: 2; 70 position: absolute; 71 left: 50%; 72 -webkit-transform: translateX(-50%); 73 transform: translateX(-50%); 74 width: auto; 75 max-width: 100%; 76 height: 100%; 77 box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15); 78 -moz-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15); 79 -webkit-box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.15); 80 &.sold-out { 81 -webkit-filter: grayscale(50%) saturate(30%); 82 -moz-filter: grayscale(50%) saturate(30%); 83 -o-filter: grayscale(50%) saturate(30%); 84 -ms-filter: grayscale(50%) saturate(30%); 85 filter: grayscale(50%) saturate(30%); 86 } 87 } 88 } 89 .item-info { 90 border-top: solid .5px #e5e5e5; 91 position: relative; 92 margin: 0; 93 height:56px; 94 background-color:#F6F7F9; 95 .item-name { 96 display: block; 97 font-weight: bold; 98 text-align: center; 99 padding: 0; 100 margin: 0; 101 line-height: 24px; 102 font-size: 11px; 103 height: 24px; 104 overflow: hidden; 105 background-color:#F6F7F9; 106 &.sold-out { 107 color: #999999; 108 } 109 } 110 .bookmark { 111 display: block; 112 position: absolute; 113 line-height: 24px; 114 left: 0px; 115 bottom: 0px; 116 padding-left: 8px; 117 padding-bottom: 4px; 118 color: #d9b86c; 119 i::before { 120 content: "\f08a"; 121 } 122 &:hover i:before { 123 content: "\f004"; 124 } 125 } 126 .price { 127 &.sold-out { 128 color: #888888; 129 } 130 } 131 } 132 } 133}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/28 08:11