Question

我在绝对定位的元素上放置了悬停过渡。悬停状态将一个box-shadow应用于heading元素以模仿它填充区域（以解决无法从属性集转换为auto的事实）。

仅在Chrome中，当转换相反时，背景图片上会留下一堆画线。显示在下图中。左边的第二个图块应用了悬停状态。

the redraw issue

注意：如果我通过其他方式将.heading元素拉伸到顶部（通过调整高度，顶部，填充），也会发生这种情况;

我对每个项目的标记如下：

<li class="item appear">
    <a href="/link-to-page">
        <div class="thumbnail" style="background-image: url('/path-to-image.jpg')"></div>
        <h4 class="heading category-icon">{$Title}</h4>
    </a>
</li>

我的SCSS（带一些波本威士忌mixin）如下：

.tiles {
    .item {
        height: 15rem;
        &.seen {
            @include appear;
            &:hover {
                .heading {
                    padding: 3rem 1rem;
                    background-color: rgba(color(blue), 0.9);
                    box-shadow: 0 -5rem 0 5rem rgba(color(blue), 0.9);
                    @include transition(all 0.5s 0s);
                    &:before {
                        opacity: 1;
                        @include transition-delay(0.5s);
                        @include transform(none);
                    }
                } 
            }
        }
        a {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 0.25rem;
            background-color: color(grey, light);
            box-shadow: 0 0 0 3px transparent; 
            overflow: hidden;
            @include transition(all 0.5s $ease-in-back);
            .thumbnail,
            .heading {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                @include transition(all 0.5s 0.5s);
            }
            .thumbnail {
                top: 0;
                @include background-cover; 
            }
            .heading {
                padding: 1rem;
                color: white;
                background-color: color(blue);
                text-align: center;
                box-shadow: 0 0 0 0 rgba(color(blue), 1);
                // Product icons loop
                @each $item in $products {
                    &.#{$item} {
                        @include icon(before, #{$item});
                    }
                }
                &:before {
                    position: absolute;
                    opacity: 0;
                    font-size: 5rem;
                    top: -4rem;
                    text-align: center;
                    right: 0;
                    left: 0;
                    @include transform(translateY(-1rem));
                    @include transition(all 0.5s 0s);
                }
            }
        }
    }
}

任何指针都会受到赞赏......

Answer 1

找到了修复...

将-webkit-transform: translateZ(0);应用于标题元素似乎可以解决问题。

如果有人有更好的答案，我很高兴仍然接受，因为这个感觉有点像黑客。

元素离开行的CSS转换

1 个答案: