CODEWITHSUNDEEP
htmlcssanimationdomcss-transitions
User
User

Reputation: 154

CSS: Weird lines when using a scale-transition

I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.

This is the relevant CSS as a quick draft:

.element {
    background-color:black;
    transition: transform 0.5s;
    transform:scale(1, 1, 1);
}

.element:hover {
    transform:scale(1.1, 1.1);
}

Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm

Here is also a screenshot for those who can't see the video for some reason: enter image description here

Upvotes: 1

Views: 973

Answers (1)

sb_
sb_

Reputation: 151

Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help CSS transition on element leaving lines

Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)

.element {
  transform: scale(1) perspective(1000px);
}
.element:hover {
  transform: scale(1.1) perspective(1000px);
}

Upvotes: 1

Related Questions