html - 元素离开行上的 CSS 过渡

Question

我在绝对定位的元素上放置了悬停过渡。悬停状态将框阴影应用于标题元素以模拟它填充区域(以解决无法从属性集转换为自动的事实)。

仅在 Chrome 中，当转换反转时，背景图像上会留下一堆油漆线。显示在下图中。从左边数第二个图 block 应用了悬停状态。

注意: 如果我通过其他方式(通过调整高度、顶部、填充)将 .heading 元素拉伸(stretch)到顶部，也会发生这种情况；

我对每个元素的标记如下:

<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(带有一些 bourbon mixins)如下:

.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); 应用于标题元素似乎可以解决问题。

如果有人有更好的答案，我仍然很乐意接受，因为这个感觉有点像 hack。