[英]Firefox rendering of background image
I have a problem when using a cover page on my website. 我在网站上使用封面时遇到问题。 The coverpage, a page consisting of an image covering the whole browser window, is loaded correctly in all browsers but when I scroll down and then up again the image is distorted(only when using firefox).
封面是由覆盖整个浏览器窗口的图像组成的页面,已在所有浏览器中正确加载,但是当我向下滚动然后再次向上滚动时,图像会失真(仅在使用Firefox时)。 The easiest way to explain is just to show the website: http://arkad.tlth.se .
解释的最简单方法是显示网站: http : //arkad.tlth.se 。 The CSS for the background image is the following:
背景图像的CSS如下:
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you want more information on the code, please inspect element. 如果您需要有关代码的更多信息,请检查元素。 I tried using this instead which worked but now the scrolling effect is gone.
我尝试使用它来代替它,但是现在滚动效果消失了。 The effect that the background image is scrolled over by the other content.
背景图像被其他内容滚动的效果。 I tried to combine the two which makes the whole screen become blanc.
我试图将两者结合起来,使整个屏幕变得白皙。 Is there something I'm missing?
有什么我想念的吗?
background: url("http://lewisking.net/images/header-image.jpg") no-repeat scroll 0px 100% / cover transparent;
I am able to confirm that the problem appears in Firefox. 我能够确认该问题出现在Firefox中。 The background image displays correctly in Chrome.
背景图片在Chrome中正确显示。
The problem in Firefox disappears if you change display: table-cell
to display: block
. 如果将
display: table-cell
更改为display: block
,Firefox中的问题将消失。
I suspect that Firefox's table cell height computation engine is causing the problem. 我怀疑Firefox的表格单元格高度计算引擎正在引起此问题。
I would try some other display mode other than table-cell. 我会尝试除表格单元格以外的其他显示模式。
I tried using display: table
with height: 100%
and width: 100%
, which is close to what you need. 我尝试使用
display: table
height: 100%
且width: 100%
display: table
,它接近您的需求。 Some trial and error may be required. 可能需要反复试验。
I was able to reproduce the problem as shown below (table cells show the drawing problem). 我能够重现如下所示的问题(表格单元格显示了绘图问题)。
html, body { margin: 0; } div { background: url(http://placekitten.com/2000/2000) no-repeat center fixed transparent; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 400px; } div.bg-cell { border: 2px dashed red; display: table-cell; height: 400px; width: 1000px; /* the width is for demo only... */ } div.bg-block { border: 2px dashed blue; display: table; /* block also works... */ }
<div class="bg-cell"></div> <div class="bg-block"></div>
Try this: 尝试这个:
.site-wrapper {
display: block;
vertical-align: top;
background: url(http://arkad.tlth.se/wp-content/uploads/2014/05/cover-image.jpg) no-repeat center fixed transparent;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And remove the '.site-wrapper-inner' rule. 并删除“ .site-wrapper-inner”规则。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.