質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

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

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

CSS

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

Q&A

解決済

1回答

2405閲覧

スマホのスクロールで画面がチラつくのを防止したい

taremimi_7

総合スコア20

CoffeeScript

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

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

CSS

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

0グッド

1クリップ

投稿2018/06/05 00:31

編集2018/06/05 02:29

スクロールとともにボタンを画面外下に隠し、スクロールが終わるとまたひょこっと出現するボタンをつくっています。しかし、スマホで見るとこのアクション(ボタンが消える時と出現する際)で画面がチラつきます(スクロールとボタンがガクガクっとした挙動に)。
また同時に、背景のすかし画像も不具合を起こします。
動作動画 ←スマホで見るともっとガクガクっとなります
どなたか解決方法を教えていただけないでしょうか。
よろしくお願いいたします。

<%= 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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

すべてのソースを読めてはいないので、それが原因かはわかりませんが、
top/left/right/bottom や margin/padding をtransition で変更すると、
domツリーを再描画してしまうので、パフォーマンスが落ちてしまいます。

scss

1.btn-exhibit { 2 transform: translateY(45px); 3 transition: all .4s ease; 4 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 5}

こちらで問題ないでしょうか。がくがくしたとしても、パフォーマンスはあがる(はず)と思います。

transformにいろいろ指定すれば、回転とか変形もできるので、面白いですよ。
リンク: https://developer.mozilla.org/ja/docs/Web/CSS/transform

投稿2018/08/23 06:28

_lemon2003_

総合スコア274

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taremimi_7

2018/08/28 08:11

回答ありがとうございます!まさにそこでした!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問