CODEWITHSUNDEEP
csssvgtransformclip-path
koni666
koni666

Reputation: 21

Combination of clip-path and scale causes flicker

I am experimenting with CSS Grid, clip-path and transforms and have come across a weird bug. The setup is as follows: a grid with several items clipped by an SVG, each containing an image and some text plus a scale transform on hover.

Now the bug I am seeing is that the clip-path sometimes "flickers" showing the unclipped item for millisecond. So far I have seen this behaviour in Chrome and Opera, Firefox behaves normally.

Here's some of the CSS (pen demonstrating the bug and full code here: https://codepen.io/konishkichen/pen/qPMwLb)

.grid {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
}

.item {
    min-height: 15rem;
    display: flex;
    position: relative;
    overflow: hidden;
    transition: $transition;
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(#000, 0.5);
        z-index: 10;
        transition: $transition;
    }
    &:hover {
        transform: scale(1.03);
        transition: $transition;
        z-index: 30;
        &:before {
            background: transparent;
            transition: $transition;
        }
        .image {
            filter: grayscale(0%);
            transition: $transition;
        }
    }
    .image {
        position: absolute;
        top: 0;
        left: 0;
        filter: grayscale(100%);
        transition: $transition;
        object-fit: cover;
        width: 100%;
    }
    .details {
        z-index: 10;
        position: relative;
        padding: 1.5rem;
    }
    &:nth-child(1) {
        grid-column-end: span 2;
        grid-row-end: span 2;
        clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
    }
    &:nth-child(2),
    &:nth-child(8) {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 13% 100%);
        margin-left: -35%;
    }
    &:nth-child(3),
    &:nth-child(9) {
        clip-path: polygon(13% 0, 100% 0, 100% 100%, 26% 100%);
        margin-left: -35%;
    }
    &:nth-child(4) {
        grid-column: 2 / span 2;
        grid-row: 3 / span 2;
        clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    }
    &:nth-child(5) {
        clip-path: polygon(0 0, 100% 0, 87% 100%, 0 100%);
        margin-right: -33%;
    }
    &:nth-child(6) {
        clip-path: polygon(0 0, 87% 0, 74% 100%, 0 100%);
        margin-right: -33%;
    }
    &:nth-child(7) {
        grid-column-end: span 2;
        grid-row-end: span 2;
        clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
    }
}

Is there an error in my code or is this a browser (webkit?) issue?

Upvotes: 2

Views: 2934

Answers (1)

Kaluã Bentes
Kaluã Bentes

Reputation: 11

For me -webkit-backspace-visibility: hidden in the non-transformed state of the element worked, this answer was found

Upvotes: 1

Related Questions