Как решить проблему неактивных областей при transform и :active?

Question

[Frank_Sidebottom]

Здравствуйте.
Задача: при нажатии на квадрат с крестиком, должен исчезать блок, который привязан с этому квадрату через jquery. При этом с помощью :active крестик уменьшается через transform: scale.

Возникла такая проблема, что при нажатии на определённые области квадрата с крестиком, скрипт не срабатывает и блок не закрывается. Если же убрать :active transform: scale , то всё работает нормально и блок закрывается при нажатии на любую область квадрата с крестиком.
Скорее всего я полный нуб и что-то не догоняю. Надеюсь на вашу помощь.

Собственно сам процесс:
И код:

Answer 1

[Mr Crabbz]

.close:active
  .fa-times
     transform: scale(2)
     pointer-events: none

Comments

[Frank_Sidebottom]

к сожалению, всё так же плохо

[Евгений Карпов]

$(document).on('mouseleave', .................

Answer 2

[Егор Живагин]

Пример на codepen или jsfiddle был бы очень кстати

Comments

[Frank_Sidebottom]

Вот примерно вот так:
Мёртвая зона какая-то
https://jsfiddle.net/6s2L4j0y/



а если установить pointer-events, то чёрный блок становится полностью активным, а содержимое вообще перестаёт реагировать

[alex]

Frank_Sidebottom:

https://jsfiddle.net/6s2L4j0y/

у меня квадрат с цифрой исчезает при нажатии на любую область, т.е. даже в ту которая у вас на гифке выше. в чем проблема то?

[Егор Живагин]

Frank_Sidebottom: у вас что-то не так) У меня всё нормально работает

[Frank_Sidebottom]

Егор Живагин: Alex: ребята, дело как оказалось, в мозиле. не пойму что не так с этим браузером. Попробовал через хром, всё нормально работает

[alex]

Frank_Sidebottom: какой-то странный баг в файрфокс, в качестве костыля можете исползовать $().mouseup()

[Frank_Sidebottom]

Alex: благодарю. заработало)