Как убрать баг с отступом после открытия-закрытия magnific-popup?

Question

[Максим Шадрин]

Всем привет. После работы с купленным шаблоном понял, что больше я с ними дело иметь не буду. Верстка такая топорная и косячная, что жуть.
Но это оффтоп. А проблема в следующем.
Есть сайт: https://siliconecosmos.com/
На нем есть блоки, отображающие карточки товара, по наведению на карточку всплывает плашка с кнопками взаимодействий.
Реализовано это css ом, на событие :hover


Проблема в следующем, если нажать на quickview (иконка глазика), что приведет за собой открытие popup, реализованного через magnific popup, а потом этот попап закрыть, то плашка останется зафиксированной, а если быть точней, лежащий внутри блока элемент "a", содержащий изображение, каким-то магическим образом поднимется на эти 40 пикселов. Т.е. по факту на плашку уже не действуют стили :hover эффекта, и сдвинулся весь блок. Лечится это только повторным наведением на блок. Ковыряю ковыряю код, не могу толку дать. Откуда вытекает эта хрень и как ее лечить?

Answer 1

[iBird Rose]

Если вкратце, то проблема из-за выезда этого черного блока внутри блока с overflow: hidden;
Самый простой путь решения - изменить выезд на opacity.

.product-img .action-btn {
    opacity: 0;
    bottom: 0;
}

.product-item:hover .action-btn {
   opacity: 1;
   bottom: 0;
}

Comments

[Максим Шадрин]

Это не совсем решение, но за совет спасибо.
Только не понятно, почему в обычном виде все работает корректно, а при открытии попапа и его закрытии, ломается.

Answer 2

[Сергей]

Я бы повесил на клик по иконке - джс событие обнуляющее стили зависающему элементу.

Comments

[Максим Шадрин]

знать бы еще, что обнулять. Если поинспектировать элементы, которые зависли, они ничем не отличаются от независших. Разница лишь в том, что визуально в зависшем элементе картинка смещается вверх на 40 пикселов, но при этом ее стили не отличаются от независшей.