DigiPress

Highly Flexible WordPress Theme

iPhone版Chromeだと、スクロール時にスクロールエフェクトが表示されない。

ホーム フォーラム 設定・不具合関連 iPhone版Chromeだと、スクロール時にスクロールエフェクトが表示されない。

  • このトピックには6件の返信、2人の参加者があり、最後にmisojiにより9年、 1ヶ月前に更新されました。
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #59071
    misoji
    参加者

    文字で説明するのは難しいので動画をとってみました。

    動画を見ていただけると一目瞭然でお分かりいただけると思いますが、
    スクロージにスクロールエフェクトが表示されません。

    なお、iPhoneのSafariで上記デモサイトをみたら、PC版と変わらず表示されます。
    正確にかけば、PC版Chromeのデバックモードでみた環境と同じ。

    これはiPhone版Chromeの固有の現象で解決が難しいかもしれませんが、一応報告です。

    なお、アンドロイド端末を所有している友人に見せて確認してもらったところ、普通にみえたそうです。

    次にですが、スクロールフェードインアニメーションを無効にする (モバイル)にチェックをいれたところ

    スクロールフェードイン

    Div要素でかこった中身の表示がされません。真っ白です。
    確かに注意書きには
    このオプションを指定して無効にした場合、ユーザーが個別に指定したアニメーション(class=”wow ***”)も無効になります。

    と書いていますが、この場合はアニメーションだけ無効になり、DIVで囲った要素(スクロールフェードイン)という文字は普通に表示されるという認識ですが、いかがでしょう?

    上記2点、ご確認よろしくお願いします。

    #59073
    misoji
    参加者

    コードが消えていたので、画像を添付します。

    添付ファイル:
    添付ファイルを開くにはログインしてください。
    #59082
    DigiPress サポート
    キーマスター

    スクロールの仕方の問題です。
    スクロールしてタップ状態を解除する(指を離す)ことでスクロールを検知し、フェードインで表示されます。
    これはiOSのSafariでもChromeアプリでも動作は同じです。

    技術的なことですが、iOSにおいて標準ブラウザのSafariとその他を区別されていますが、AppStoreでダウンロードして利用できるブラウザアプリはすべてWebkitがベースです。
    つまり、実際のブラウザエンジンは例外なくすべてSafariと同じです。

    これはiOSアプリにおけるアップルのガイドラインとしても、提供されている開発リソースの技術的な手法としても、iOSアプリとしてウェブブラウザを搭載するにはiOSのレンダリングエンジン(Webkit)をベースとするしか方法がありません。

    サードパーティとして提供されるiOSのブラウザアプリは、例外なくWebkitです。

    #59115
    misoji
    参加者

    これは大変失礼な言い方かもしれませんが、あえていいます。
    本当に実機で確認したうえで返答していますか?

    スクロールの仕方の問題です。
    スクロールしてタップ状態を解除する(指を離す)ことでスクロールを検知し、フェードインで表示されます。
    これはiOSのSafariでもChromeアプリでも動作は同じです。

    と記載されていますが、私は明確に違うと思いますよ。
    Safariの場合はスクロール中も表示されてますが、Chromeの場合はスクロール中に表示は一切行われずに離すと表示がでます。(小難しい、技術論じゃなく体感ではっきりわかります。)

    この現象がiPhoneChrome固有の仕様であると、言うのであれば納得できますが。
    safariとChromeが同一の現象というのは、納得し難いです。

    iosのChromeとsafariの表示のされ方の違いなんて技術うんぬんではなく、体感したら一目瞭然でわかると思いますよ。
    一人のユーザー視点からみると、難しい技術なんてどうでもいいです、その技術うんぬんがめんどくさいから有料テーマーをかってるわけです。

    ですから、技術論に逃げるのではなく実際に体験してその上で仕様とおっしゃるのならば納得できますよ。

    こっちはsafariです。

    Chromeは上記のURLです。

    この比較動画を見比べたうえでも、同じ仕様と言えますでしょか?

    あと
    Div要素で囲った要素が出ない件もスルーしないできちんと説明してください。

    #59116
    misoji
    参加者

    もう少しはっきりと違いが分かる動画をとってみました。

    こちらの動画はsafariでスクロールのみ、一切指を外していません。それでもきちんと表示されています。(PCと同じように)
    https://youtu.be/BI7z7-qHwx4

    こちらはChromeです、スクロールのみでは表示されません。指を離すと表示がでます。
    https://youtu.be/NFBf_Lq62Lg

    #59169
    DigiPress サポート
    キーマスター

    失礼いたしました。
    iOSのChromeアプリではスクロールイベントを発生させるタイミングが通常のWebviewの動作とは異なるようです。

    http://qiita.com/HelloPeople/items/b1d731809f5cc32dea7f

    これはiOSのChrome固有の現象であり、テーマの本機能に限らずscrollイベントを利用するようなスクリプトすべてに影響がある問題です。

    ChromeがiOSのWebviewに意図的にこのようなフィルタを仕掛けている以上、本来はChromeが標準の動作に準拠することが望ましく、テーマ側(Javascript)でChromeのみを対象にして何らかのスクリプトの改変を行うことは予定しておりませんので問題視される場合はモバイルテーマでのスクロールフェードインアニメーションは無効にしてください。

    Div要素で囲った要素が出ない件もスルーしないできちんと説明してください。

    最新版(1.1.1.8)にアップデートしてください。
    ※アップデート後は必ずビジュアル設定の「設定を保存」で最新のテーマに準拠したCSSを再作成してください。

    #59185
    misoji
    参加者

    (`・ω・´)ゞ

    対応ありがとうございました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。