CSSのanimationがiOSのChromeで動かない...transitionで対応10.15TUE2024いしかわろぐ釣り自身の趣味である「釣り」について綴った記事の一覧。釣り具や仕掛けの細かい説明よりも、釣りに訪れた際の雰囲気をメインに綴っています。海釣り・川釣り、釣った魚を捌いての釣り飯や釣具のレビューもしています。釣った魚をさばいて調理した「釣り飯」について綴った記事のまとめ。刺身に焼き魚に煮物......天ぷらも美味しいし......と、レシピ豊富な釣り飯。我が家で一番多い釣り飯メニューは干物。干物の作り方についても綴っていますよ。海釣り「海釣り」について綴った記事の一覧。メインはルアー釣りですがなんでも好きです。ヘラブナ釣り「ヘラブナ釣り」について綴った記事の一覧。小物釣り「小物釣り」について綴った記事の一覧。身軽な装備でふらっと釣り場に行き、極小の仕掛けで小さな魚を狙う。小さな世界だけど奥深き小物釣り。シーバス釣り「シーバスフィッシング」について綴った記事の一覧。→引っ越してからは霞ヶ浦水系。シーバスはセイゴ→フッコ→スズキと大きさによって呼び名が変わる出世魚。近所で釣りしています。ブラックバス釣り「ブラックバスフィッシング」について綴った記事の一覧。茨城に引っ越してきてから、バス釣りのメッカ霞ヶ浦水系で見事にハマりました。50UPを釣るのが当面の目標です(笑)スモールマウスバス釣り「スモールマウスバスフィッシング」について綴った記事の一覧。ブラックバス釣りはしているもののスモールマウスバスとなるとまた別。釣り方が異なり、引きもブラックバスより強くて楽しい!テナガエビ釣り「テナガエビ」について綴った記事の一覧。以前は江戸川、今は霞ヶ浦水系でテナガエビをしています。楽しい上に食べておいしい釣り。メバリング「メバリング」について綴った記事の一覧。引きが強くて釣って楽しい、食べればおいしいメバル。始めて見たら楽しくてメバリングにハマっています。趣味である釣りの道具「釣具」について綴った記事の一覧。釣り歴はそれなりに長いのですが、長い間釣具にはあまり頓着ありませんでした。フカセ釣りを始めたことで道具の大事さにようやく気付き始めた次第です。基本的には、安いものを使用しております(笑)キャンプ「キャンプ」について綴った記事のまとめ。外で時間を過ごすのが好きなので、キャンプを時折おこなっています。そのキャンプ内容について綴ったり、キャンプ場の様子を綴ったりしています。キャンプ飯キャンプギアで調理するキャンプ飯。キャンプ場で、またはキャンプに行けない時間にも自宅で作ったキャンプ飯についての記事をまとめています。キャンプギア「キャンプギア」について綴った記事のまとめ。購入したギアのレビューから、自作のギアに綴ったりもしています。飲み物ライフスタイル田舎暮らし東京から茨城の田舎へ移住。そこでの暮らしの様子などを綴った記事の一覧。庭作り・畑・DIYなどの記事を公開していきます。山登り「山登り」について綴った記事のまとめ。自然を満喫しに、綺麗な景色を眺めに訪れることの多い山。ついて綴った記事のまとめ。自転車に乗ってあてもなくまっすぐ走っていくのが子供の頃から好きでした。最近、Giantの「Rock4800」というマウンテンバイクを譲り受けたことで、自転車を触る時間が増えてきています。自転車旅なんか、できたらいいなぁ。2024/7/16本ページはアフィリエイトプログラムを利用していますCSSのanimation。昔は要素を動かすにはjQueryのanimateばかり使っている時期がありましたが、jsは多用しすぎると動作が重くなってしまう。CSSのanimationを使えばそれが改善されるということで、知った時には感動したものです。それ以降は要素を動かす際には、まずCSSのanimationで考え、jsと併用して実現する......という流れとしています。このCSSアニメーションですが、以前よりデバイスやブラウザごとで動作が異なったりと悩ましい部分があります。今回もそんな件、色々忘れていてハマったので備忘録として。目次CSSのanimationでページスクロールアニメーションを実装したらiOSのChromeで動作しないCSSのanimationはやめてtransitionで対応CSSのanimationでページスクロールアニメーションを実装したらiOSのChromeで動作しないスマホ表示時にページスクロールアニメーションを入れたい、との要望。スクロールに合わせて見出しや画像なんかの要素がフェードインしたりするアレです。CSSのanimationで実装。PCのChromeのウェブデベロッパーツールでスマホ表示して実装。その後実機で確認すると......iPhoneで問題あり。Safariでは問題なかったのですが、Chromeでアニメーション部分がおかしい。フェードはされているようですが、translateは全く効いていません。scaleなんてよくわからない動作をしています。Chrome側にバグがありそうですが......。jQueryのanimateで動かすとCPU処理になって重たくなりそうですし、GPU併用でスムーズに動作させたいところです。設定を変更してみたりしたものの、CSSのanimationでは解消できず......。そこでtransitionで書き替えてみることにしました。animationのほうが細かく設定できて、且つ書きやすいのですが、iOSのChromeを捨てるよりは良いかな、と。元のanimationでの設定はこのような形。transitionで書き替えるとこのような形。上から下に要素をフェードさせて出現させています。transitionを使うことで、iOSのChromeでも予想通りに動作しました。transition-delayを設定しないと、iOSのChromeでは動作がおかしくなります。ここでも若干ハマりました。デバイスやブラウザごとでの動作の違いは解消に時間がかかりますね......。コピーishikawaいしかわろぐ関連記事HTML・CSS・プログラミングfile_get_contentsが動かない?cURLを使いallow_url_fopenがOffのサーバに対応ファイル内容を読み込む関数「file_get_contents()」。PHPからAPIなどの外部ファイルの内容を取得するにも使える関数ですが、サーバの設定によっては使えないという状況が起こりうる場合があります。前の案件で「建物の緯度経度は所持しているのだけど住所が無い。緯度経度から住所をまとめて取得することは可能?」という話がありました。逆ジオコーディングってやつですね。mapとか利用してできない?」と、ウェブ絡みの話というこ...HTML・CSS・プログラミングテーマXeoryを使っているならitemscopeを直したほうがいい【WordPress】バズ部が提供している無料のWordPressテーマ、Xeory。当ブログ、並びに運営しているWordPressサイトの大半は、そのXeoryをテーマとして利用しています。記事更新に夢中になっていて気付かなかったのですが、過去記事を見直していたらソーシャルボタンのFacebookシェアボタンのカウント数が取得できていないことに気づきました。どの記事を見ても、シェア数は0。「PDFをウェブサイトに置いてユーザーに閲覧させたいけど、特定のページを経由しないと見れないようにしたい」こんな依頼を受けることが結構あります。ユーザーに何らかアクションをしてもらっ...HTML・CSS・プログラミングffmpegをphpのexecで動かそうとしてハマる動画を色々いじってみたくてffmpegを試しました。インストール系苦手なんです。知識が無いだけなのだけれども、大体ハマる。今回も例にもれず、ややこしくなりました。強風に翻弄されるメバリング...12月初旬冬のメバル釣りピザ窯KABUTO|ポータブルピザ窯で手作りピザを焼いてみたコメントコメントを書き込むコメントをどうぞメールアドレスが公開されることはありません。名前メールサイト上に表示された文字を入力してください。constraint2019/8/172024/7/1Vue.jsでtoggle機能実装!多箇所で使いたい時の実装方法2019/8/152024/7/1Chromeで「データ侵害によりパスワード情報が漏洩」と警告が!対応方法は?2020/1/82024/7/22refを複数に設定したい...$refsで取得した要素のスタイル操作|Vue.js2019/8/202024/7/1プロフィール仕事関係ではウェブの世界にどっぷり浸かっているが、趣味はアウトドア。(11)新着記事ふらっと秋のタナゴ釣り!1円玉サイズのミニタナゴと遊ぶ2024/10/15夜の秋イカエギングでアオリイカ!初イカをイカ刺しに。WINGにブログを移行してみたら......!2024/9/25友人と海釣りで不発も...ブラックバス釣りで会心の一匹2024/9/20ブラックバス釣ってカンパチ食べて笑った友人来訪初日2024/9/19中華鍋で燻製作り!自家製ベーコン・燻製チーズが適当な作り方でも美味なり。defined.")}))})()タイトルとURLをコピーしました。