1

如果您想自己检查问题，请转到此处。如果您想多次查看该错误，则需要禁用缓存

我有一个看起来像这样的网站： 网站应该是什么样子

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

首次加载网站时的外观

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

有问题的元素是一个绝对元素，放置在它的父元素后面，但用 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 中测试

4

0 回答 0