CSS Ease-out blinking

Question

I am developing a website and I dont know why, my left divs with ease-out blinks always, but the right not! I dont want them to blink and I cant resolve this insue.

I saw, that this changes with the page size, like on full screen happens, when we reduce a little bit its fine, and reduce more happens again! I think its a bug.

Code from divs:

<div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInUp;">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-laptop-code"></i>
                        </div>
                        <div class="service-text">
                            <h3>Web Development</h3>
                            <p>
                                Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
                            </p>
                        </div>
                    </div>
                </div>

.service {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}

.service .service-item {
    position: relative;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 0 0 transparent;
    transition: ease-out 0.5s;
}

.service .service-item:hover {
    box-shadow: inset 800px 0 0 0 #EF233C;
}

.service .service-icon {
    position: relative;
    width: 150px;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #EF233C;
    background: #ffffff;
}

.service .service-icon i {
    position: relative;
    font-size: 60px;
    color: #EF233C;
    transition: .3s;
}

.service .service-item:hover i {
    font-size: 75px;
}

.service .service-text {
    position: relative;
    width: calc(100% - 120px);
    padding: 0 30px;
}

.service .service-text h3 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    transition: 1s;
}

.service .service-text p {
    margin: 0;
    font-size: 16px;
    transition: 1s;
}

.service .service-item:hover .service-text h3,
.service .service-item:hover .service-text p {
    color: #ffffff;
}

@media (max-width: 575.98px) {
    .service .service-text h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }
    
    .service .service-text p {
        font-size: 14px;
    }
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DevFolio - Developer Portfolio Template</title>
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="Free Website Template" name="keywords">
        <meta content="Free Website Template" name="description">

        <!-- Favicon -->
        <link href="img/favicon.ico" rel="icon">

        <!-- Google Font -->
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">

        <!-- CSS Libraries -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/animate/animate.min.css" rel="stylesheet">
        <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
        <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="css/style.css" rel="stylesheet">
    </head>





        <!-- Service Start -->
        <div class="service" id="service">
            <div class="container">
                <div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
                    <p>What I do</p>
                    <h2>Awesome Quality Services</h2>
                </div>
                <div class="row">
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fa fa-laptop"></i>
                            </div>
                            <div class="service-text">
                                <h3>Web Design</h3>
                                <p>
                                    Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fa fa-laptop-code"></i>
                            </div>
                            <div class="service-text">
                                <h3>Web Development</h3>
                                <p>
                                    Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fab fa-android"></i>
                            </div>
                            <div class="service-text">
                                <h3>Apps Design</h3>
                                <p>
                                    Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
                        <div class="service-item">
                            <div class="service-icon">
                                <i class="fab fa-apple"></i>
                            </div>
                            <div class="service-text">
                                <h3>Apps Development</h3>
                                <p>
                                    Lorem ipsum dolor sit amet elit. Phase nec preti mi. Curabi facilis ornare velit non
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Service End -->
        
    </body>
</html>

There you have my code html just with services and css! Now all are blinking when they are under each other! And I dont know why

Gif of what happens:

Could you put a working snippet in your question please so we can see the problem for ourselves. And is there some missing CSS - e.g. what happens on hover? See [link]https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Jul 20 '21 at 21:16
Thanks. It seems to be something to do with the way box-shadow is rendered, though I don't understand what. This quesion [link]https://stackoverflow.com/questions/47168067/box-shadow-hover-transition-blinking has a useful answer from @TemaniAfif as using an absolutely positioned pseudo element (rather than border as in the accepted answer) will not disturb the positioning of other elements. — A Haworth, Jul 20 '21 at 22:37
@Haworth I solved it, by adding `box-shadow: inset 0 0 0 0.09 transparent`! I saw a suggestion on a answer from the question you has linked! — Gonçalo Bastos, Jul 21 '21 at 21:42

CSS Ease-out blinking

0 Answers0