web-dev-qa-db-ja.com

iOS 11のWebビューで下にスクロールするとヘッダーが消える問題を修正

Webコンテンツを表示するWebViewを備えたネイティブiOSアプリがあります。アプリに次のプロパティを持つ固定ヘッダーがあります：

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: fixed;
    width: 100%;
    z-index: 1;
}

IOS 11にアップグレードする前は、すべて正常に機能していました。下/上にスクロールすると、スクロール中にヘッダーが消え、スクロールが完了するとヘッダーが再び表示されます。

これはXcode 8でも再現できます。

ioscsswebviewios11
41
Bergerova

私はただいくつかのコードを書いています、一つずつ試します

Apple公式メモから：

重要：

IOS 8.0およびOS X 10.10以降、WKWebViewを使用してアプリにWebコンテンツを追加します。 UIWebViewまたはWebViewを使用しないでください。

したがって、WKWebViewで1回試してください。

15
iPatel

position: fixedhasalwaysbeenaproblem iOS iOSのすべてのバージョンで問題が解決しないようです。さて、iOS 10から11へのアプリケーションの動作の変更に関しては何も見つかりませんでした バグとして報告 ;一方、この問題に遭遇した多数の人々と、多かれ少なかれalliOSの最新バージョンに影響する事実を見たposition: fixedを使用します。

最も一般的な回避策は transform: translateZ(0) です。これはiOSで機能するだけでなく、可能な限り ちらつき を防ぎます。また、ハードウェアアクセラレーションを使用してGPUにアクセスすることをブラウザーに強制します ピクセルを飛ばす また、iOS 9からの接頭辞-webkit-なしでも機能するはずです。

12
Paolo Forgia

同様の問題があり、以下の2つのプラグインで修正されました

https://github.com/Apache/cordova-plugin-wkwebview-enginehttps://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix

最初のプラグインはデフォルトのWebViewをWKWebViewに変更し、2番目のプラグインはWKWebViewを使用した場合に見られるCORS問題の修正を提供します。

6
Dilip

Webviewを使用するiOS用に構築されたCordovaプロジェクトでも、この非常に類似した問題がありました。 CordovaはデフォルトでそのWebviewエンジンとしてUIWebViewを使用し、このスレッドや他の多くで言及されているすべての可能な修正を試しました。最後に、唯一の解決策は、WebViewエンジンをUIWebViewからWKWebViewに変更することでした（ https://developer.Apple.com/documentation/webkit/wkwebview ）。 Cordovaでは、プラグインを使用してWKWebViewを簡単に導入できます https://github.com/Apache/cordova-plugin-wkwebview-engine

WKWebViewを導入し、WKWebViewによって引き起こされる問題のいくつかを処理した後、iOS 11でスクロールしているときに、固定配置された要素がちらついたり消えたりすることはなくなりました。

6
calle

秘Theは、GPUアクセラレーションを強制することです。これを行うには、translate3dを#header要素に追加します。

transform: translate3d(0,0,0);

#header要素内にネストされた要素が消え続ける場合は、translate3dも追加します。

4
Dedering

Position：fixedとposition：stickyの両方で同じ問題が発生しました。 UIWebViewからWKWebViewに変更すると、修正されました。

#import <WebKit/WebKit.h>

....

@property (weak, nonatomic) IBOutlet WKWebView *myWebView;

「iOS 8.0およびOS X 10.10以降、WKWebViewを使用してWebコンテンツをアプリに追加します。UIWebViewまたはWebViewは使用しないでください。」

https://developer.Apple.com/documentation/webkit/wkwebview

1
claytronicon

IOSでは位置修正はうまく機能しませんが、コードバアプリで絶対位置を使用したため、問題が発生することはありません。

1
Tapas

iOS 11のいくつかの変更 でこの投稿を見たことがあるかもしれませんが、そうでない場合はあなたの状況に当てはまるでしょうか？

viewport-fit: contain/cover/autoオプションの1つですか？

または、padding-topにconstant値を使用するようにコードを変更しますか？

1
Ben

これは私のために働く

position: sticky
0
Lauyonggang

私はこのまったく同じ問題と自分自身で戦いました。

（少なくとも私が取り組んでいるアプリで明らかになっているように）この問題は、高さ（かなりのスクロールが必要）とかなり複雑な組み合わせの画面でのみ発生するようです。

一般的に、少なくとも私にとっては、運動量のスクロールが開始されたときにのみ問題が実際に現れるようです。

特に1つの画面があります。画面には、左右にスクロールできる15行の画像が含まれていますが、どれだけゆっくりスクロールしても、ヘッド/フッターが壊れます。

私自身の防御では...デザインに絶対に何もありませんでした。 :-)

いずれにせよ...

多くの実験を探した後、私はなんとか「解決策」を思いついた。

気をつけて、私はこれがここに行く方法であると主張していません。しかし、おそらくモバイルアプリの分野で私よりも経験のある人は、この情報を取得して、そこからあまりしゃべりのないものを推測することができます。

最初のピースは次のようになります。

html,
body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
}

そして、画面の本体として機能するコンテナの場合：

.main-content-area {
    overflow-y: auto;
    height: 100%;
}

これは、アプリのモーメンタムスクロールを無効にします。それは素晴らしいことではありません、私は知っています。しかし、ユーザーの非常に迅速なスクロール機能を削減した結果、画面のレンダリングは維持でき、問題はなくなりました。

繰り返しますが、私はこれを生産のための実行可能なソリューションとして推奨しません。それは明らかに大きくないからです。

私はこれが実際のソリューションへの可能性のある足がかりとして、これが役立つことを期待して、これをさらに提供しています。

=== >>> UPDATE：

実用的なソリューションがあります。しかし、私が前に指摘したように、私は固定位置の使用を避けなければなりませんでした。

代わりに、ページのヘッダー、フッター、およびメインコンテンツセクションを定義するために絶対配置を使用しました。次に、メインコンテンツセクションでのみスクロールを許可しました。

それが役立つ場合、私は BitBucket で利用可能なPOCを用意しています

0
Oook

position:stickyの代わりにposition:fixedを使用しようとしましたか？

過去には、iOSで非常にうまく機能します。 position:stickyルールが再定義されているtopが定義されることに注意してください。

したがって、最終的な解決策は次のとおりです。

#header {
    height: 60px;
    background-color: @mainColor;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1;
}

また、上から追加のオフセットが必要な場合は、top:0;ルールをゼロからpxの任意の数値に調整できます。

そしてもう1つの最後の注意：スティッキー要素はドキュメントフローから要素を抽出せず、通常のドキュメント要素（position:staticまたはrelativeを含むdiv）として機能しますが、絶対配置要素ではありません（場合） fixedまたはabsolute）。

http://caniuse.com/#feat=css-sticky

0
Andrew Ymaz