8

Chromeバージョン18.0.1025.162 m
を使用しています。iframeを含むhtmlファイルがあります。

含まれているページまたはそのcss（main.htm）
を変更できません。iframe（show.htm）とそのcssのみを変更できます。

問題は、下にスクロールしてから上にスクロールすると、adminbardivが数回複製されることです。
2つのスクリーンショットを添付しています。最初のスクリーンショットはスクロール前の画面です。また、バグを再現できるようにコードを追加しています。

Chromeのバグかもしれないと思いますが、よくわかりません。
それがバグであるかどうか、さらに重要なことに、iframeを変更するだけで回避策があり、iframeから背景色を削除することは含まれていないかどうかを知りたいです。
（iframeから背景色を削除すると問題は解決しますが、背景色が必要です）

だからこれはそれがどのように見えるかです：スクロールする前に： ここに画像の説明を入力してください

スクロール後（管理バーが画面に複製されます） ここに画像の説明を入力してください

Chromeでバグを再現するコードを作成しました

最初のファイル-main.htm（このコードは変更できません）

<!-- main.htm -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#adminbar 
{
    background-color: #464646;
    height: 28px;
    position: fixed;
    width: 100%;
    top: 0;   
 }

 #body-content 
 {
    float: left;
    width: 100%;
 }
 </style>

 </head>
 <body >
 <div id="body-content">
    <iframe src="show.htm" width="100%" height="943"></iframe>

    <div id="adminbar" class="" role="navigation">
    </div>
 </div>

 </body>
 </html>

とshow.htm

<!-- show.htm -->
<!DOCTYPE html>
<head>
<style type="text/css">
body 
{
    background: #e0e0e0;
}
</style>
</head>
<body>
 <br/>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
<p style='margin-bottom:500px;'>bazinga</p>
</body>
</html>
4

8 に答える 8

7

回避策を見つけたと思います。必要な色（＃e0e0e0）の1つのピクセルを持つファイルbackground.pngを作成しました。

次に、これを置き換えます。

body 
{
     background: #e0e0e0;
}

これとともに：

body 
{
    background: #e0e0e0 url(background.png) repeat-x;
    background-attachment: fixed;
}
于 2012-05-01T12:21:41.850 に答える
4

-webkit-transform: translate3d(0,0,0);ボディコンテンツCSSに追加

CSS

#body-content {
   float: left;
   width: 100%;
   -webkit-transform: translate3d(0,0,0);
}

これにより、ChromeはGPUを使用し、レンダリングの問題をスムーズにするようになります。

更新：main.htmは変更できないので、show.htmの背景色を同じ色の背景画像に変更するのはどうですか？私はこれをテストしました、そしてそれは働きました。それは可能ですか？

于 2012-04-29T16:03:04.667 に答える
2

セットアップを再作成してから、のにを追加しscriptましbodyたshow.htm。簡単な方法として、 inにaname="if1"を追加しましたが、明示的に割り当てられた名前を使用しなくても、要素のハンドルをいつでも見つけることができます。<iframe />main.htm

が一番上までスクロールされた場合にのみ、提供したダミーセットアップの問題が解決するようです。main.htm変だと思って、クラブに参加してください！これが本物で機能するかどうかを確認してください...いずれにせよ、それは正しい方向への微調整かもしれません！:)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body 
{
    background: #e0e0e0;
}
</style>
</head>
<body>
<br/>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<p style="margin-bottom:500px;">bazinga</p>
<script type="text/javascript">
    window.onscroll = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _parentScale = parent.document.body.style.webkitTransform;
        parent.document.body.style.webkitTransform = _parentScale;
    }
</script>
</body>
</html>​​​​​​​​​​​​​​​

また、就寝時​​刻になるまで以下の実験をしてみました！

<script type="text/javascript">
    window.onscroll = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _me = document.body;
        _me.style.webkitTransform = _me.style.webkitTransform;
        //_me.style.display='none';
        _me.offsetHeight
        //_me.style.display='block';

        var _parent = parent.document.body;
        _parent.style.webkitTransform = _parent.style.webkitTransform;
        _parent.style.display=_parent.style.display;
        _parent.offsetHeight
        //_parent.style.display='block';
    }
    parent.window.onscroll = function(){
        console.log("But. You're in my spot!");
        //parent.document.if1.document.body.style.webkitTransform = 'scale(1)';
        var _me = document.body;
        _me.style.webkitTransform = _me.style.webkitTransform;
        //_me.style.display='none';
        _me.offsetHeight
        //_me.style.display='block';

        var _child = parent.document.if1.document.body;
        _child.style.webkitTransform = _child.style.webkitTransform;
        _child.style.display=_child.style.display;
        _child.offsetHeight
        //_child.style.display='block';
    }
</script>

また、次のスクリプトを使用してj08691の回答を適用しようとしましたが、少し予期しない結果が得られました。配置absoluteされたトップバーを固定しないようにしました。

    window.onload = function(){
        console.log("It's 'Doctor' Sheldon Cooper!");
        var test = parent.document.getElementById("body-content");
        test.style.webkitTransform = "translate3d(0,0,0)";
    }

すでに存在している可能性がありますが、存在しない場合は、関連するプロジェクトのバグレポートとしてこれを提出できますか？

于 2012-04-30T00:05:03.973 に答える
1

より徹底的なテストを行い、バグを整理するために、実際のWebサイトのライブデモ/バージョンを入手すると役立ちます。

いずれにせよ、私はバグを再現して修正することができました（種類）：

これが「show」cssです。

body 
{
    background: #e0e0e0;
    height:100%;
    width:100%;
    z-index:9999;
    position:fixed;
}

テストページへのリンクは次のとおりです。

sotkra.com/t_main.html

最後になりましたが、これはバグであり、実際の「ベース」ドキュメントに対するiframeコンテンツのスクロールのちらつきが原因です。私は以前に同様の問題を見たことがありますが、それに関するドキュメントも同様にありませんでした。それらは単にバグをレンダリングしているだけであり、通常は特定のcssに満たないか、ブラウザを除いて誰のせいでもない非常に奇妙なケースが原因です。

乾杯G

于 2012-05-01T02:24:32.763 に答える
1 
#adminbar {
background-color: #464646;
height: 28px;
position: fixed;
width: 100%;
top: 0;
right:0px
}
#body-content {
float: none;
width: 100%;
}
于 2012-04-29T15:38:58.633 に答える
1

css float: left;からを削除すると、問題なく動作します。#body-content

これはChromeのレンダリングのバグのようです。上にゆっくりスクロールすると、iframeの色として管理バーから単色が表示されます。

ちなみに、OSXのクロムはまったく同じようにレンダリングされます。

于 2012-04-29T08:03:39.033 に答える
1

yossiの答えを改善/簡素化する：

body 
{
    background:url('bg.png');
}

宣言する必要はなくbg-color、repeat-x背景画像が必要です。

Chrome 18.0.1025.168、Mac OSX10.6.8でテスト済み。

スクリーンショット

于 2012-05-03T01:49:33.813 に答える
1

背景画像としてグラデーションを使用することもできます。これは、画像ファイルを作成する必要がなく、クライアント側で追加のリクエストを生成しないため、私にとっては望ましいことです。

body {
  background: #FFF -webkit-linear-gradient(top, #FFF, #FFF) repeat-x;
  background-attachment: fixed;
}
于 2013-04-05T19:01:06.790 に答える