Safari 6のレンダリングの問題/アーティファクト（Mountain Lion）

12

最終更新 AppleからこのバグがOS X Mountain Lion 10.8.3で修正されたことを確認するメールを受け取りました

私はすべてMountain Lionを実行しているさまざまなシステムでSafari 6のレンダリングの問題を抱えていましたが、解決策が見つかりません。問題を説明するスクリーンショットを添付しました。

更新さらなる調査により、これは2012 Macモデル、特にHD4000グラフィックスのモデルのみの問題である可能性が示唆されています。

更新アーティファクトが常にすぐに表示されるとは限らないようで、表示される前にタブを再読み込みしたり、タブを閉じたり、開いたりする必要があります。

更新この問題はWebKitのバグではないことが確認されており、Appleにバグとして報告されています（Simon Fraserの問題12750455）。

SafariのTwitter Bootstrap Webサイト

FirefoxのTwitter Bootstrap Webサイト

SafariでのTeakのjsfiddle

FirefoxでのTeakのjsfiddle

スクリーンショットに表示されているWebサイトへのリンク：

macos safari graphics

— レネ
ソース

2

テキストを少し編集しようとしましたが、別のサイトの方が良いかどうかを提案して移行する前に、主に探しているものを明確にできますか？これは、パッチが必要なJQueryについてですか、それともWebKit / Safariについてですか？ここではユーザーに焦点を当てており、プログラマーやWeb開発者もいますが、コードレベルやバグ/回帰レベルの知識を得るには最適な場所ではありません。Appleにバグを報告する方法については指摘できますが、一般的には、詳細なhtml / css / jsに関するQ＆Aはここにありません。

— bmike

1

私は完全に罰金だ... imgur.com/a/vICCs私はOS Xのライオン10.7.5のSafari 6.0.1を実行している

— daviesgeek

@bmikeこれはMountain Lionの問題であり、html / css / jsの問題ではないようです。

— ルネ

Mountain Lionを運営している同僚に質問したところ、問題はありませんでした。そのため、問題の原因は謎のままです。

— ルネ

1

@ Renéblackpixel.com/blog/2012/02/radar-or-gtfo.htmlによれば、Appleに重複するバグを報告することをお勧めします。

— オリーホジソン

3

これはSafariのバグであり、OSX Update 10.8.3で解決されました！

— グイド・ヘンドリクス
ソース

1

たとえば、更新ノートの関連する引用を追加すると、回答の価値が大幅に高まります。

— -Thecafremo

1

アップデートノートには実際には記載されていませんでしたが、解決しました。アップデートの前後に自分で試してみました。

— グイドヘンドリックス

1

今週はMountain Lion 10.8.3 + Safari 6.0.3のリリースでAppleによって修正されたようです。

— シンクラー

8

これはIntel Graphics 4000 GPUのバグであることを確認できます。Mt. LionとNvidia Geforce GPUを搭載した古いMBPではなく、13インチRetina MacBook Proでグラフィックアーティファクトが表示されます。

ウェブサイト用のCSSボタンを開発しようとしている間に、私はこの問題を直接経験しています...

私は、css3 border-radiusとを組み合わせて使用することで、アーティファクトを再現できると考えていますbox-shadow。明らかにそれは他の多くの状況でも起こりますが。（確認できます）

Webkit Webサイトのバグレポートへのリンクを次に示します（そこに属しているかどうかはわかりませんが）。

https://bugs.webkit.org/show_bug.cgi?id=103087

そして、それが由来するSOの質問：

/programming/13505314/artifacts-on-css-rendering-box-shadow-on-safari-6-0-2-on-mountain-lion

— チーク
ソース

1

これを共有してくれてありがとう。ただし、この問題はOS X Mountain Lionに固有であり、HD4000グラフィックスのみに関係するため、Webkitの問題だとは思いません。

— ルネ

2

これはIntel HD 4000のバグではありません。このバグは、Intel HD 4000のSafariでのみ確認できます。（Opera、Chrome、Firefox）でページを開くと、このバグを再現できません。

— ウラジミール・カドニコフ
ソース

2

この問題の簡単な解決策は、境界線半径またはその他の損傷の原因となるプロパティでオブジェクトに変換を使用することです。そうすれば、グラフィックカードを使用して強制的に再描画を行うことができ、問題を解消できます。

次のプロパティを適用します。- -webkit-transform: translate3d(0,0,0);元気です。

— カルムス
ソース

たくさんのものを含むdivに適用する場合、パフォーマンスコストはさほど重要ではありませんが、バグを回避します。

— ジェームズ

パフォーマンスコストは？これに関するいくつかのデータを見たいです。追加されたコストはすべてGPUで処理する必要があります。

— カルムス

1

null変換は、GPU上でその要素のバッキングテクスチャを作成します。これにより、ペイントではなくコンポジットであるため、要素の移動が安価になりますが、要素を再描画するだけでなく、新しいテクスチャをGPUにアップロードする必要があるため、要素の変更（テキスト、寸法、スタイルの変更など）がより高価になります。また、GPUメモリも使用しますが、これは電話で問題になる可能性があります。

— JaffaTheCake

有難うございます。これに関する情報の推奨事項はありますか？

— カルムス

1

他の人が何が起きているのかを複製したり調べたりするために、インターネット上にあるものへのリンクを提供できない場合に私がすることは次のとおりです。

毎晩Webkitビルドを試して、修正されたが出荷されていないバグかどうかを確認します。http://nightly.webkit.org
Safariからすべての拡張機能を削除して、それが原因ではないことを確認します。

— bmike
ソース

スクリーンショットに表示されているWebサイトへのリンクを追加しました。

— ルネ

両方の提案を試しましたが、残念ながらうまくいきませんでした。

— ルネ

1

Retina 15インチMacbook（osx 10.8.2、safari 6.0.2）でもこのバグを確認できます。

私のMacbookにはIntel HD4000もありますが、外部ディスプレイ用にNvidia GT 650Mもあります。

グラフィックカード（ドライバー）以外のすべての可能性を排除するために、サンダーボルト-dviアダプターを使用して、Nvidiaカードの外部ディスプレイを接続しました。

結果：奇妙な線や異常なjquery効果はありません！

結論：HD4000（ドライバー）の問題。

— ルーベン
ソース