Div с позицией: Absolute не отображается в Firefox, пока не будет открыт инспектор ⇐ Html

[Anonymous]

Я могу воссоздать эту проблему только в частном окне просмотра в Firefox; Другие браузеры, кажется, не делают этого. Попытка перетаскивать ползунок влево и вправо, и изображение не изменится. Однако, если вы щелкните правой кнопкой мыши на странице и нажмете «Проверьте (q)», вдруг это «до и после», как и «Slider работает, как и ожидалось.

Код: Выделить всё

[img]after.webp[/img]

[img]before.webp[/img]

родитель использует позицию: относительный :

Код: Выделить всё

.ba-slider {
position: relative;
overflow: hidden;
}

Детский div использует позицию: Absolute :
.ba-slider .resize {
position: absolute;
top: 0;
left: 0;
height: 100%;
overflow: hidden;
}
< /code>
В Google Chrome или других браузерах это работает так же, как и ожидалось. Более того, как только Firefox загружал эту страницу пару раз, она тоже начинает вести себя правильно. В то время как JavaScript связан с этой анимацией, это кажется проблемой CSS. Что может вызвать это неожиданное поведение в Firefox и как его исправить? Спасибо!


Подробнее здесь: https://stackoverflow.com/questions/797 ... -is-opened