8

我正在使用 chrome 版本18.0.1025.162 m
，其中包含带有 iframe 的 html 文件。

我无法更改包含页面或其 css (main.htm)
我只能更改 iframe (show.htm) 及其 css。

问题是当我向下滚动然后向上滚动时，adminbar div 会被复制几次。
我附上了 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

我想我找到了解决方法。我创建了一个文件 background.png，其中有一个像素具有我想要的颜色（#e0e0e0）。

然后我替换这个：

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 中添加了一个name="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

这将有助于获得您实际网站的实时演示/版本，以进行更彻底的测试并解决错误。

无论如何，我能够重现该错误，然后修复它（有点）：

这是“显示”CSS：

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

这是我的测试页面的链接：

sotkra.com/t_main.html

最后但并非最不重要的一点是，是的，它是一个错误，它是由 iframe 内容的滚动对实际“基本”文档的闪烁引起的。我以前见过类似的问题，但同样没有关于它的文档。他们只是渲染错误，通常是由不特定的 css 或非常奇怪的情况引起的，除了浏览器之外没有人的错。

干杯

于 2012-05-01T02:24:32.763 回答
1

float: left;从你的CSS中删除#body-content它，它会工作得很好。

这看起来是 chrome 中的渲染错误。如果你真的很慢地向上滚动，你会注意到你从管理栏中得到一个纯色作为你的 iframe 的颜色。

顺便说一句，OSX 上的 chrome 渲染完全相同。

于 2012-04-29T08:03:39.033 回答
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

使用渐变作为背景图像也可以。这对我来说更可取，因为我不必创建图像文件，也不会在客户端生成额外的请求。

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

改进/简化 yossi 的答案：

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

无需声明bg-coloror repeat-x，只需要背景图片。

在 Chrome 18.0.1025.168、Mac OS X 10.6.8 上测试。

截屏

于 2012-05-03T01:49:33.813 回答