Explain the bug in Firefox?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
15 views
The logic is this: when you hover the block flips and shows the "reverse" side
In fact, the implementation of 3D flip card as Here
in chrome and Opera everything is fine, but in Firefox noticed a bug: when restoring a block is flipped using the transform rotate and transition, and shows the reverse side with the background image, but the image in the process of turning flickers, stops to flicker just turning.
BUT
if you set "front" of the block transform: rotateY(0deg) then the image does not flicker, and all the rules
What is the hack? And why is this behavior?
here is all the code in CodePen
by | 15 views

1 Answer

0 like 0 dislike
Apparently you have to react on :hover of the parent element because the element .flip when the rotation changes so to speak a HitBox, which counts a :hover.

That is you in your foam needs to change the selector .flip:hover on .wrap:hover > .flip and then you've got to work without flicker.

PS on HTML5Book in the example by the way as I say and done.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
asked Apr 9, 2019 by angryblacker
0 like 0 dislike
1 answer
0 like 0 dislike
1 answer
110,608 questions
257,186 answers
0 comments
35,534 users