6

バグはこちら: https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/chromium-bugs/eUfzp3UJDwo%5B1-25%5D

この問題が発生し、Chrome では画面が縞模様になりましたが、Firefox や IE では発生しませんでした。Macでこれを見た人はいますか？

4

7 に答える 7

5

の削除background-color:

body {
...
background-color: #fff; 
}

私の場合、レンダリングされたHTMLドキュメントのCSSでiFrame問題を解決しました。

于 2012-11-08T11:39:31.660 に答える
3

このバグを解決するために 1 日を費やした後、別の回避策があり、おそらく「より簡単な」回避策があることを確認できました。

私の場合、これらのソリューションは機能しませんでした。実際、それらを chrome の問題トラッカー ( http://code.google.com/p/chromium/issues/detail?id=143354で探してください) の例に適用しても、実際には問題は解決しませんでした。(PS: 通常、問題はスクロールバーの使用と、マウスのスクロールの使用に基づいています)。

したがって、機能するサービスをいくつか検索して、何を推測しましたか
。Visual Web サイト オプティマイザー
にはこの問題はなく、実際に iframe を使用しています。お疲れ様でした!

では、彼らはどのようなソリューションを使用したのでしょうか?
彼らは固定の高さを使用しました。（うん！）

では、chrome issue 143354 の例 (背景が赤いもの、わかりましたか?) を見て、コードを次のように変更します。

<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%" frameborder="0" src="./page2.html"></iframe>
</body>
</html>

に

<html>
<body style="background-color:red">
<p>This is outside the iframe</p>
<iframe width="80%" height="50%"  src="./page2.html" style="margin: 0px !important; padding: 0px !important; height: 286px; "></iframe>
</body>
</html>

これで赤い線の問題は解決します。

私の webapp を修正するには、ウィンドウのサイズ変更ごとに高さを計算し、それらの margin/padding を配置し、iframe での相対位置を回避する必要がありました。

それが役に立てば幸いです（それを解決するために私はほとんど頭から離れました）

于 2012-09-26T13:41:00.243 に答える
2

同じ問題がありました。位置スタイルを相対に設定することで解決：

<iframe ... style="position: relative"></iframe>
于 2012-11-09T08:14:36.877 に答える
2

これらの視覚的な異常を引き起こす問題は、Chrome の最新のカナリア ビルド (>= 25.0.1365.1 カナリア) で修正されていることが確認されているため、Chrome の安定したチャネルですぐに修正が行われることを願っています。

于 2012-12-19T20:42:47.363 に答える
0

DOM を少し変更することで、この Chrome のバグを回避できることがわかりました。

たとえば、これが問題の原因でした:

  <h1>foobar</h1>
  <iframe src="..." style="border:none"></iframe>

...しかし、H1をSPANに置き換えると修正されました：

  <span style="display:block">foobar</span>
  <iframe src="..." style="border:none"></iframe>
于 2012-09-07T15:48:08.913 に答える
0

同様の問題に遭遇し、私の場合は -webkit-margin-after と -webkit-margin-before を 0 に設定することで修正できました。

<h1 style="-webkit-margin-after:0; -webkit-margin-before:0;">foobar</h1>
<iframe src="..."></iframe>

また、最初はJiriの例のようにH1をスパンに置き換えてみましたが、スパンに.2emの上下マージンを適用しようとすると、線が戻ってきました。マージンを削除するときれいになりました（ヘッダーの周りにスペースを作成するために line-height を使用しました）

于 2012-09-13T21:43:29.757 に答える