Почему дергается картинка под конец анимации scale?

Question

Прикрепляю ссылку на видео - https://youtu.be/hea-IXNeZSA Под конец анимации можно увидеть как картинка+текст дергаются. Если приблизить браузер, то данного эффекта не будет. если отдалить или оставить 100%, то эффект виден.

Это баг браузера или как это назвать? Как сделать лучше? Попробуйте изменять размер браузера (Ctrl+колесо мыши) и заметите эффект на тексте или картинке.

const items = document.querySelector(".slider__items");
const itemNext = items.querySelector(".item-slider--next");
const itemPrevious = items.querySelector(".item-slider--prev");
const itemCurrent = items.querySelector(".item-slider--current");


let index = 1;

function prev() {
    slider(index -= 1)
}

function next() {
    slider(index += 1)
}

function current() {
    slider(index = 1)
}

function slider() {
    const itemMarginLeft = parseFloat(getComputedStyle(itemCurrent).marginLeft)
    const itemWidth = itemCurrent.offsetWidth + itemMarginLeft;
    const itemsMarginLeft = parseFloat(getComputedStyle(items).marginLeft);

    if (index == 0) {
        items.style.marginRight = -(itemWidth * 2) + 'px';
        opacity(1, 0.6, undefined)
        transform('scale(100%)', 'scale(67%)', 'scale(67%)')
    }
    if (index == 1) {
        items.style.marginLeft = 0 + 'px';
        items.style.marginRight = 0 + 'px';
        opacity(0.6, 1, 0.6)
        transform(undefined, 'scale(100%)', 'scale(67%)')
    }
    if (index == 2) {
        items.style.marginLeft = -(itemWidth * 2) + 'px';
        opacity(undefined, 0.6, 1)
        transform(undefined, 'scale(67%)', 'scale(100%)')
    }

}


function transform(prevScale = 'scale(67%)', currentScale = 'scale(100%)', nextScale = 'scale(67%)') {
    itemPrevious.style.transform = prevScale;
    itemCurrent.style.transform = currentScale;
    itemNext.style.transform = nextScale;
}

function opacity(prevOpacity = 0.6, currentOpacity, nextOpacity = 0.6) {
    itemPrevious.style.opacity = prevOpacity;
    itemCurrent.style.opacity = currentOpacity;
    itemNext.style.opacity = nextOpacity;

}

.slider {
    width: 800px;
    margin: auto;


    /* Hide horizontal scrollbar */
}

.slider__items {
    display: flex;
    height: 660px;
    justify-content: center;
    align-items: flex-start;
    transition: margin 0.3s ease;
}

.item-slider {
    position: relative;
    transition: transform 1.5s ease,
        opacity 0.5s ease;

}

    .item-slider__bg-img {
        border-radius: 20px;
    }

    .item-slider__text {
        position: absolute;
        width: 439px;
        height: 250px;
        padding: 81px 99px 18px 98px;
        bottom: -61px;
        left: 50%;
        transform: translate(-50%);
        background-color: #FFFFFF;
        box-shadow: 0px 4px 59px 9px rgba(0, 0, 0, 0.05);
        }
        .item-slider__text img {
            position: absolute;
            left: 50%;
            top: -83px;
            transform: translate(-50%);
            border-radius: 50%;
        }

        .item-slider__text p {
            margin-bottom: 24px;
            font-weight: 400;
            font-size: 20px;
            line-height: 30px;
            text-align: center;
            color: #000000;
        }

        .item-slider__text h5 {
            text-align: center;
        }
    
.item-slider--prev {
    transform: scale(67%);
    transform-origin: 50% 50%;
    opacity: 0.37;
}

.item-slider--current {
    transform: scale(100%);
}

.item-slider--next {
    transform: scale(67%);
    transform-origin: 50% 50%;
    opacity: 0.37;
}

<div class="about-us">
                <h1>What People Say About Us</h1>
                <div class="slider">
                    <div class="slider__items">
                        <div class="slider__item item-slider item-slider--prev" onClick="prev()">
                            <img class="item-slider__bg-img" src="https://i.ibb.co/wSdpJ4Y/image-22.jpg" alt="">
                            <div class="item-slider__text">
                                <img src="https://i.ibb.co/QdZjvxx/Ellipse30.jpg" alt="">
                                <p class="item-slider__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    ut
                                    aliquam, purus sit amet luctus venenatis, lectus magna
                                    fringilla urna, porttitor</p>
                                <h5 class="item-slider__author">-Jeo Stanlee</h5>
                            </div>
                        </div>
                        <div class="slider__item item-slider item-slider--current" onClick="current()">
                            <img class="item-slider__bg-img" src="https://i.ibb.co/wSdpJ4Y/image-22.jpg" alt="">
                            <div class="item-slider__text">
                                <img src="https://i.ibb.co/QdZjvxx/Ellipse30.jpg" alt="">
                                <p class="item-slider__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    ut
                                    aliquam, purus sit amet luctus venenatis, lectus magna
                                    fringilla urna, porttitor</p>
                                <h5 class="item-slider__author">-Jeo Stanlee</h5>
                            </div>
                        </div>
                        <div class="slider__item item-slider item-slider--next" onClick="next()">
                            <img class="item-slider__bg-img" src="https://i.ibb.co/wSdpJ4Y/image-22.jpg" alt="">
                            <div class="item-slider__text">
                                <img src="https://i.ibb.co/QdZjvxx/Ellipse30.jpg" alt="">
                                <p class="item-slider__quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit
                                    ut
                                    aliquam, purus sit amet luctus venenatis, lectus magna
                                    fringilla urna, porttitor</p>
                                <h5 class="item-slider__author">-Jeo Stanlee</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

БЛОГ НА HUSL

Почему дергается картинка под конец анимации scale?

Ответы (0 шт):