修复了附件背景图像与 css 转换结合使用时在镶边中闪烁/消失的问题

我目前正在做一个视差网站主题。对于某些"div"和"部分"，背景图像需要固定附加，以避免jquery沉迷于所有内容。问题是任何动画项目下方标签的背景图像在转换过程中消失了，仅在谷歌浏览器上。补救？

这是一个非常普遍的未解之谜。最近我遇到了同样的问题，"-webkit-backface-visibility：隐藏"被证明是无用的(在我的"固定"附加背景上(，因为背景在设置时就消失了。(附加信息：原因是当背景设置为固定时，几乎类似于在背景中放置固定的"div"并将原始div 背景设置为透明。隐藏的背面是显而易见的(。

要解决当前的问题，请尝试将元素的">位置"属性设置为">静态"，或者如果您给了它一些其他值，即">相对"、">固定"或">绝对"，只需删除它们。

如果您不记得设置了 position 属性，并且问题仍然存在，我的建议是您在 chrome 或 Firefox 上使用调试工具，

确保没有手动设置"位置"属性的值，除了 "静态"。

刚刚花了半个小时搜索...以为这可以让你更容易...问候。:)

同样的问题在这里。我有一个粘性标题，使用在PC Chrome 34中闪烁的position:fixed;。我尝试了此线程中的解决方案，position:static;父线程中的解决方案破坏了其他部分。但我知道添加-webkit-transform: translate3d(0,0,0);基本上会使Chrome将该html变成一个图层，这样它就不会被重新绘制。这对我有用。

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

更新
未来友好的答案是使用 will-change 属性创建图层！
W3规格
卡诺斯
MDN 定义

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

老实说，这似乎是修复闪烁的奇怪解决方案，但本质上它使元素成为一个层，与 translate3d(( 相同。

也许回答有点晚了，但似乎该错误带有背景附件：chrome 中的固定属性。我找到了一个解决方案，其价值为"滚动"。它会在 Firefox 上引起抖动效应，但您可以使用 CSS 中的媒体浏览器查询来避免它，如下所示：

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

希望对您有所帮助！

我在 Chrome 上遇到了同样的问题，这似乎是页面内部发生太多事情时发生的错误，我能够通过将以下转换代码添加到固定位置元素来修复它，( transform: translateZ(0);-webkit-transform: translateZ(0); ( 强制浏览器使用硬件加速访问设备的图形处理单元 (GPU( 以使像素飞行。另一方面，Web 应用程序在浏览器的上下文中运行，这允许软件完成大部分(如果不是全部(渲染，从而减少过渡的马力。但是Web已经迎头赶上，大多数浏览器供应商现在通过特定的CSS规则提供图形硬件加速。

使用 -webkit-transform： translate3d(0,0,0(; 将启动 GPU 对 CSS 过渡的操作，使它们更平滑(更高的 FPS(。

注意：translate3d(0,0,0( 对你所看到的内容没有任何作用。它将对象在 x，y 和 z 轴上移动 0px。这只是一种强制硬件加速的技术。

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

这真的困扰着我，几乎毁了我的夜晚。我的解决方法是设置

background-attachment: scroll;

它适用于我的项目。
在此之前，我已将其固定。希望这有帮助。

对我来说

，问题是附加到具有固定背景的div父元素的样式，我-webkit-backface-visibility: inherit;固定div的两个主要父元素。

就我而言，我使用的是画布外的粉底，所以它是这样的

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}
.inner-wrap{
    -webkit-backface-visibility:inherit;
}

我们在position: fixed;元素上遇到了类似的问题。此元素包含一个相对定位的容器，其中包含一个绝对定位的图像。在CSS过渡上，图像消失了，当过渡完成后，图像会重新出现。

我们尝试通过将-webkit-backface-visibility设置为hidden多个元素(包括 body 元素(来解决问题，但这没有帮助。在这个线程的帮助下，我们使用Chrome的网络检查器来摆弄elments的position属性，幸运的是，我们能够解决问题，而无需对网站进行太多更改。(我们所要做的就是将固定元素的父元素的位置更改为static(

未来近 5 年的更新...这似乎仍然是铬的问题。我已经尝试了提到的大多数解决方案，包括添加：

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

它没有解决口吃问题。添加background-attachment: scroll会消除视差效应，这对网站的用户体验至关重要。上面提到的添加父元素的解决方案对我来说没有任何变化。最近遇到此问题的人还有其他想法吗？我在前端使用Gatsby(React(。

这是一个适用于 (2014.7.11( 火狐 30.0、chrome 35.0、opera 22.0、即 11.0 的解决方案：

第 1 步：在 .htaccess 中添加以下行：

# cache for images
<FilesMatch ".(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

此问题的详细说明以及如何解决它：https://code.google.com/p/chromium/issues/detail?id=102706

第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]);
    }
}

附言感谢肖恩·奥特曼

我的任务是创建一个具有视差效果的页面。在尝试通过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+'%'});
            }
        });
    });
}

.CSS：

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title 将是固定了背景附件的项目。

所以我使用的是 Chrome 版本 40，但仍然看到此问题。目前对我有用的解决方法是相对于该div 创建一个内部div 设置位置，使其适合其父级的高度，并使用固定的背景附件在父级div 上设置背景：

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

在我的情况下，当您将位置相对和背景附件固定在同一元素上时，似乎会出现问题。

希望这有帮助。

这个派对迟到了，但一个惊人的发现，正如我可以看到大多数 css 框架用户、Bootstrap、基金会(其他(都有问题，我相信你们中的许多人也有滚动到顶部 js 函数，当用户开始向下滚动时显示滚动到顶部按钮，

如果你有这样的东西(引导程序内置了它(

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

或者您正在通过以下方式显示某些元素，

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

或者您正在添加任何类型的元素或带有过渡的元素类，向下滚动，通过 JS(动画.css，航点.js，速度.js (
如果可能，请从该元素中删除过渡/类，或者在该元素出现时重新检查，以解决断断续续的 Chrome 问题。

将 transform 属性添加到具有固定背景图像的元素中。您可以有任何设定的位置。

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

我在弹出窗口下方的覆盖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;
}

我认为只有当父元素的位置不明显时，才会出现问题。

如果帮助了任何人，很高兴。Regards

当您在元素上添加任何标记时，似乎在 Chrome 中出错。尝试从此类元素中删除背景并为其指定位置：相对。在元素内部添加一个具有所需尺寸的新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 内创建一个包装器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>

我不再有闪烁了，显然闪烁错误不会下降到子容器。

我在Chrome中也有同样的问题

非常简单，无需添加任何webkit和媒体标签，只需按照以下步骤操作即可

1.代替背景：url('路径到图像'(像下面这样设置图像并将位置设置为固定

阿拉伯数字。它将在Chrome和IE浏览器中工作

问题仍然存在。

当我有 { 背景附件：固定; 转换：缩放(1(; 过渡：转换 } 时，它会发生在我

身上

我需要修复背景附件以获得视差效果。

我正在滚动扩展我的容器。

当转移和转换被移除视差时。话虽如此，我可以有一个比例效果或视差效果，而不是同时在铬上工作。

Safari 不会抱怨，并且两者都像魅力一样工作

相关内容

最新更新

热门标签：