CODEWITHSUNDEEP
htmlcss
alecbaldwin
alecbaldwin

Reputation: 300

Animating CSS scaleY causes glitchy lines around divs

If you run the below snippet you see when you hover over the divs the animation causes small white lines to form on the edges. This kinda looks glitchy. Is there a better way to animate the box out on mouseover without causing these glitchy lines around the divs? I thought that animating scale was meant to be performant? This glitch is even worse the more divs there are.. is it some kind of antialias setting?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Find My Shade</title>
</head>
<body>
    <div class="fms-wrapper">
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(65, 104, 148)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(95, 189, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 168, 72)"></div>
        <div f9 class="fms-shade" fms-bg="rgb(189, 72, 183)"></div>
    </div>
</body>

<style>

.fms-wrapper {
    height: 300px;
    width: 100%;
    display: flex;
    margin: 100px 0;
}

.fms-shade {
    flex-basis: auto;
    flex-grow: 1;
    transition: all 0.8s;
    transform-origin: 0.5;
    transform: scaleY(1);
}

.fms-selected {
    flex-grow: 4;
    transition: all 0.2s;
    transform-origin: 0.5;
    transform: scaleY(1.2);
}

</style>

<script>
    var hoverColor = 'pink';

    document.addEventListener('DOMContentLoaded', fms())

    function fms(){
        var shadeFinder = document.querySelector('.fms-wrapper')
        var shadeDiv = document.querySelectorAll('.fms-shade')

        //first load the right colors in to the divs
        shadeDiv.forEach(div => {
            div.style.backgroundColor = div.getAttribute("fms-bg")
        })

        //mouse events
        shadeFinder.onmouseover = function(event) {
            let target = event.target;
            target.style.background = hoverColor;
            target.classList.add('fms-selected')
        };
        shadeFinder.onmouseout = function(event) {
            let target = event.target;
            target.style.background = target.getAttribute("fms-bg");
            target.classList.remove('fms-selected')
        };
    }
</script>
</html>

Upvotes: 2

Views: 90

Answers (1)

chris
chris

Reputation: 799

Adding a margin-left:-1px to your .fms-shade class removes the gap. 

.fms-shade {
    flex-basis: auto;
    flex-grow: 1;
    transition: all 0.8s;
    transform-origin: 0.5;
    transform: scaleY(1);
    margin-left:-1px;
}

Here is the working coding with this change.

Upvotes: 3

Related Questions