Weird behavior with margin on mac when opacity of child element changes

Question

I am building a memory game. It works fine on chrome on Windows.

However with a mac, there is a weird glitch, that causes the cards to jump after the second set of cards gets uncovered.

The code for each card is this:

<div id="'+counter+'" class="'+num+' card covered"><div>'+num+'</div></div>

whereas counter is the int variable from a for loop, num is the face of the card (a random number, making sure it has only 1 pair per number).

The cards get covered or uncovered by a change in the background color of our .card and the opacity of the child element .card div gets set to 1 or 0 respectively. Also the cards were rotated and spaced randomly via jquery.

Here are two fiddles: http://jsfiddle.net/awm0ccbp/7/

Click on each card to uncover it. It should work fine. Basically what it does is every time you click on a card change the opacity of the child element from 0 to 1.

Here is the second version: http://jsfiddle.net/awm0ccbp/6/ This time the cards get covered again after you uncovered 2 cards.Starting on the third click, things will get messy: The previously uncovered cards get flipped over (opacity back to 0) but the newly uncovered card will somehow get an additional margin, causing all the cards to be pushed around.

I believe the margin comes from our child element, which is rotated, and therefore pushes cards over and to the side.

So why does it act so weird on a mac, after you cover the cards back up?

Answer 1

Apply font-size:40px on all div.card like so:

div.card{
    display:inline-block;
    width:100px;
    height:100px;
    cursor:pointer;
    overflow: hidden;
    font-size:40px;
}

As it is, when you remove the uncovered class, you also remove the font-size, so the change in font-size is causing that shifting. (Updated fiddle http://jsfiddle.net/awm0ccbp/8/ )