Странная линия в CSS Transform Scale Hover

Я пытаюсь получить рейд этой странной линии из многих дней,но не могу понять, почему эта линия все еще появляется при наведении. (z-indexна parent и image div но нет все то же самое)

В основном он появляется, когда изображение сдвигается 1px влево, и он показывает красный фон в виде линии. Он будет белым, если вы установите фон прозрачный.

Реплицировать: https://jsfiddle.net/o67hx6u7/

* наведите курсор на второй столбец, и вы увидите красную линию.

GIF: в случае, если вы не видите линию:

Введите описание изображения здесь

2 ответа

  1. Заменять

    .ss-row-slid {
        min-height: 600px;
        height: auto;
        overflow: hidden !important;
        background: rgb(255, 0, 0);
    }
    

    с

    .ss-row-slid {
        min-height: 600px;
        height: auto;
        overflow: hidden !important;
    }
    
  2. Я пытался найти реальную причину проблемы, но, к сожалению, я не мог найти реальное решение.

    Но есть одна интересная вещь, Красная линия видна только при определенных значениях window.innerWidthнапример 841, 873, 913, 921, 1073 ...и для отдыха она работает идеально.

    Виновником в вашей ситуации является transform: scale(1.1)собственность.

    Исправление, которое я нашел, установлено

    .row-slid-inner-bg {
        width: 101%;
    }
    

    Надеюсь, это поможет!