5

モバイル デバイスで位置が固定されたメニューを使用するレスポンシブ Web サイトがあります。

iPhone の Safari では、メニューのレンダリングが他のコンテンツよりも遅いようです。同じ速度でレンダリングしたい。これに対する解決策はありますか？

4

2 に答える 2

1

ページの読み込み中は問題ありません。何時間ものテストの後、ページのアンロード時に問題が発生することがわかりました! この問題は、iOS (Mobile Safari & Chrome) の WebKit に関連しています。position: fixed、position: device-fixedまたはposition: stickyページのアンロード時に消える要素。

ページのアンロード時に固定配置要素が消えるも参照してください

編集：

私はそれに固執します...

修正された要素は合成レイヤーに持ち上げられ、 ページのアンロードに対応するバグがあります。

http://newscentral.exsees.com/item/528d72c6d22fab46e4eb18e5cb8fece0-0d5a1eca143f58f995dc015e265514cbから:

「[...] ドキュメントのアンロード時に合成されたレイヤーは、そうでない要素よりもはるかに速く破棄されます [...] これは WebKit エンジニアによってバグであることが確認されています。」

望み：

iOS 8 では、より高速な新しい Web ビュー コンポーネントが導入されました: WKWebView. サファリはそれを使用します。Safariを使用すると問題はなくなりました:)

iOS 8 で一般的なものUIWebViewと新しいものを比較します。html/web コンテンツを表示するために使用するアプリは、まだ問題の影響を受けています :(WKWebViewUIWebView

于 2015-09-22T10:24:12.797 に答える
-1

position:fixed を持つ要素の古典的な CSS 最適化の 1 つは、それをレイヤーに配置しすぎます。ユーザーがスクロールするときに、このゾーンの再描画を回避します。これを行うには、次のように use 3d transform を追加できます。

nav {
    background: none repeat scroll 0 0 #FF0000;
    height: 30px;
    left: 0;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-transform: translateZ(0);
}

すべてのベンダー プレフィックスを追加することを忘れないでください。Chrome 開発ツールで「ペイントの四角形を表示」を有効にして、ページからすべての再描画を表示できます。

于 2013-11-10T17:56:31.837 に答える