Проблема с прокруткой CSS Flip Card в Firefox: появляется полоса прокрутки, но не работает с колесиком мыши ⇐ CSS

[Anonymous]

Если я сделал откидную карту, подобную той, что показана здесь, Flip_card, но сделал прокручиваемую переднюю и заднюю карты, то прокрутка с помощью колеса мыши будет работать только с задней картой, а передняя будет работать только в том случае, если я щелкнул непосредственно по полосе прокрутки и переместил ее вверх или вниз.
Это происходит только в Firefox.
Вот модифицированная версия приведенной выше флип-карты, которая наглядно демонстрирует проблему:

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

function rotate() {
document.getElementsByClassName("flip-card-inner")[0].style.transform = "rotateY(180deg)"
}

function rotateBack() {
document.getElementsByClassName("flip-card-inner")[0].style.transform = "rotateY(0)"
}

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

body {
font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: auto;
}

.flip-card-front {
background-color: #bbb;
color: black;
}

.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}

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

Card Flip with Text
Hover over the image below:
Flib
Flib back



[img]img_avatar.png[/img]
John Doe
Architect & Engineer
We love that guy
John Doe
Architect & Engineer
We love that guy
John Doe
Architect & Engineer
We love that guy

John Doe
Architect & Engineer
We love that guy
John Doe
Architect & Engineer
We love that guy
John Doe
Architect & Engineer
We love that guy
John Doe
Architect & Engineer
We love that guy

Полоса прокрутки на передней карте будет работать, только если обратная сторона скрыта (отображение :none).
Так почему же это происходит только в Firefox? и почему мне нужно его скрывать, поскольку задняя карта уже имеет свойство Transform: RotateY(180deg)?
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ork-with-m