元素离开线上的CSS过渡 [英] CSS transition on element leaving lines

问题描述

我已将鼠标悬停过渡放置在绝对定位的元素上.悬停状态在标题元素上应用了一个阴影框，以模仿它填充区域(以避开您无法从设置为auto的属性过渡的事实).

I have placed a hover transition on an absolutely positioned element. The hover state applies a box-shadow to the heading element to mimic it filling the area (to get around the fact you cannot transition from a property set to auto).

仅在Chrome浏览器中，当转换反转时，背景图像上会留下许多油漆线.显示在下图中.左侧的第二个图块已应用了悬停状态.

In Chrome only, when the transition is reversed, there are a bunch of paint lines left behind on the background image. Displayed in the image below. The second tile from the left has the hover state applied.

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

NOTE: This also happens if I stretch the .heading element to the top by other means (by adjusting height, top , padding);

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

My markup for each item is as follows:

<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)如下:

My SCSS (with a few bourbon mixins) is as follows:

.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);
                }
            }
        }
    }
}

任何指针将不胜感激...

Any pointers would be appreciated...

推荐答案

找到了解决方法...

Found a fix...

在标题元素上应用 -webkit-transform:translateZ(0); 似乎可以解决此问题.

Applying -webkit-transform: translateZ(0); to the heading element seems to fix the issue.

如果有人有更好的答案，我仍然很乐意接受，因为这有点像个骇人听闻的内容.

If anyone has any better answers I am happy to still accept as this one feels like a bit of a hack.

这篇关于元素离开线上的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！