Question

If you want to check out the problem for yourself, go here. You'll need to disable cache if you want to see the bug more than once

我的网站看起来像这样： What the website should look like

或者应该看起来像这样，除了第一次加载页面之外，它每次都设法渲染得很好：

What the website looks like when you load it for the first time

事实证明，如果你试图在没有缓存的情况下加载网站（即第一次），那么背景会在顶部被切断，但是在特定元素的一半左右会出现一个小补丁。

有问题的元素是一个绝对元素，放在它的父元素后面，但是用javascript调整到完全相同的位置和高度。这个类被称为“模糊”，它之所以这样做是为了模糊元素背后的所有内容，而不是它所在的相同元素的内容。它看起来像这样：

<body>
    <div class="card">
        <div class="blur">
        </div>
        <div class="content">

与.blur关联的样式：

.blur {
    position: absolute;
    z-index: -1;

    border-radius: 5px;
    background: url("mavericks.jpg");

    -webkit-filter: blur(5px);
    -webkit-backface-visibility: hidden;
}

现在，如果我发表评论-webkit-backface-visibiltiy：hidden，问题会立即得到解决。然而，在没有隐藏背面的情况下，介绍动画变得令人难以置信地缓慢，而且身体的背景不是模糊元素的背面部分，并且不应该隐藏，据我所知。甚至更奇怪的是，即使此元素的高度或宽度设置为0，渲染问题仍然存在。

我有一种强烈的感觉，这是某种webkit错误，但如果有人可以帮我找到解决方法或找到-webkit-backface-visibility的替代品，我会非常感激，因为没有动画片的外观像废话。随意浏览网站的来源。已在Chrome 27.0.1453.116和Safari 7.0中测试

-webkit-backface-visibility破坏了后台渲染，只有没有缓存

0 个答案: