我目前正在制作一个视差网站主题。需要将背景图片固定在特定的“div”和“section”上,以避免jQuery介入所有内容。问题是,在进行变换时,下方任何动画项的背景图像都会消失,只有在Google Chrome浏览器中出现此问题。解决方法?
我目前正在制作一个视差网站主题。需要将背景图片固定在特定的“div”和“section”上,以避免jQuery介入所有内容。问题是,在进行变换时,下方任何动画项的背景图像都会消失,只有在Google Chrome浏览器中出现此问题。解决方法?
# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>
步骤2:添加图像预加载,例如:
var pics = []; // CREATE PICS ARRAY
$(document).ready(function(){
...
preload(
'/public/images/stars.red.1.star.png',
'/public/images/stars.red.2.star.png',
'/public/images/stars.red.3.star.png',
'/public/images/stars.red.4.star.png',
'/public/images/stars.red.5.star.png',
'/public/images/stars.empty.png'
);
...
$('.rating').on('mousemove', function(event){
var x = event.pageX - this.offsetLeft;
var id = getIdByCoord(x); //
if ($(this).data('current-image') != id) {
$(this).css('background-image', 'url(' + pics[id].src + ')');
$(this).data('current-image', id);
}
})
...
})
...
// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
// alert("preload " + arguments[i]);
}
}
P.S. 感谢Shawn Altman
我的任务是创建一个带有视差效果的页面。在尝试使用CSS修复后,我想出了以下解决方案。
JavaScript:
var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{
var itemArr = $('.slider-title');
$(window).scroll(function()
{
var pos = $(window).scrollTop();
var wh = window.innerHeight;
$(itemArr).each(function(i, item){
var p = $(item).position();
var h = $(item).height();
if (p.top + h > pos && p.top < pos+wh)
{
// items ir redzams
var prc = (p.top - pos +h)/wh ;
//console.log(prc);
$(item).css({'background-position':'center '+prc+'%'});
}
});
});
}
/*only for webkit browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.slider-title{
background-size:auto;
background-position: center 0%;
}
}
.slider-title将是具有background-attachment fixed的项目。
.fade {
opacity: 0;
-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
}
.fade.in {
opacity: 1;
}
<script>
显示某个元素。-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;
如果您必须使用position: fixed/relative/absolute,可能是因为您内部有一个绝对定位的元素(就像我的情况一样),那么另一个解决方法是在闪烁的div内创建一个包装器div,并将位置和背景属性移动到其中。
例如:
您原来的代码可能是 -
<div class="background-flickers' style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
可能的解决方法
<div class="no-more-flicker!">
<div class="wrapper" style="style="background:url('path-to-image'); position:relative">
<absolutely positioned element>
</div>
</div>
我不再有闪烁问题了,显然闪烁 bug 不会传递到子容器。
似乎在Chrome中添加元素标记时会出现错误。尝试从该元素中删除背景并将其设置为position:relative。在元素内部添加一个具有所需尺寸和背景的新div,但不要在其中添加任何标记。
示例:
当前:
<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
已更正:
<div class="container" style="position:relative;">
<div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
<div class="example"></div>
</div>
我在叠加的div下面遇到了问题,它在弹出窗口中随机消失(在Opera 20中),两者都是通过脚本激活的。
<div class="popupwrapper">
<div id="popupdownload" class="popup">
<h1>Test</h1>
</div>
<div class="popupoverlay"></div>
</div>
.popupwrapper {
display: none;
z-index: 9100;
}
.popupwrapper.active {
display: block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition: opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(26,26,26,.9);
opacity: 0;
}
.popup {
position: fixed;
top: 30%;
left: 40%;
padding: 48px;
background: #e6e6e6;
z-index: 9101;
-webkit-transform: scale(1.6);
transform: scale(1.6);
opacity: 0;
}
.popupoverlay.active {
opacity: 1;
}
.popup.active {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
覆盖层的定位方式是绝对定位(.popupoverlay),但它所在的容器没有进行任何定位。我将覆盖层的绝对定位复制到其父元素(.popup)上,现在可以正常工作了。
.popupwrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9100;
}
我认为问题只会在父元素的定位不明显时出现。
如果能帮到任何人,我会很高兴。敬礼
我在Chrome浏览器中也遇到了同样的问题
解决方法非常简单,无需添加任何webkit和媒体标签,只需按照以下步骤操作:
1.不要使用background:url('path-to-image'),而是像下面这样设置图像,并将位置设置为fixed
2.这样可以在Chrome和IE浏览器中正常工作