Help me make this CSS work on Firefox please

Have a look here (pw: paris)
Each of the boxes in the grid has a nifty little card-flip on hover which displays a description of that benefit.

... unless you're using Firefox.

My version of Firefox (52) displays the boxes OK but when you hover on them it flips the SVG icons around (and the text), displays the backside only momentarily and then goes white.

Can anyone explain what I should do to make this grid compatible with Firefox.
As far as I know, all other browsers can see it fine.

Following is the html and code for each individual box.
Many thanks
Tim

HTML
<div class="flip-cards card-shadow rMargin">
  <div class="front-card">
    <div class="frow column-center">
        <div class="aSVGIcon">
              <svg class="[types field='svgscale' output='raw'][/types]" fill="#58595B" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">[types field='svg-paths' output='raw'][/types]
              </svg>
        </div>
        <div class="cbenTitle">
                [wpv-post-title]
        </div>
    </div>
  </div>
  <div class="reverse-card" id="[wpv-post-id]">
    <p class="cbenText">[wpv-post-body view_template="None"]</p>
  </div>
</div>

Open in new window


CSS
.centerIt{
  margin: 0 auto; 
}
.rMargin{
  margin-right:5px; 
}
.flip-cards
{
    width:200px;
    height:200px;
    position:relative;
    /*background:#BBBDC0;*/
    /*margin-left:5px;*/
    /*margin-right:auto;*/
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}


.flip-cards:hover
{
    transform: rotateY( 181deg );
    -webkit-transform: rotateY(181deg);
    -moz-transform: rotateY(181deg);
    background:transparent;
}


.flip-cards div
{
    width:200px;
    height:200px;
    position:absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

.front-card
{
    z-index: 2;
    background:#BBBDC0;
    position:relative;
    padding:0;
}

.reverse-card
{
    -webkit-transform: rotateY(181deg);
    transform: rotateY( 181deg );
    -moz-transform: rotateY( 181deg );
    background:#C64A4F;
    color:white;
    padding:10px;
}
.aSVGIcon{
}
.cbenTitle{
  margin-top:75%;
  color:#58595B;
  text-align:center;
  font-size:0.7em;
  text-transform:uppercase;
}
.asvgScale{
    transform: scale(0.5);
}
.lgScale{transform:scale(0.5);}
.mdScale{transform:scale(0.4);}
.smScale{transform:scale(0.3);}
.reverse-card p {
  font-size:0.8em; 
}

Open in new window

LVL 1
Tim BrocklehurstHead of DigitalAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I have had a look and I can see the problem but have not managed to find a solution yet. Just posting here to say that your question has been viewed.

I suspect this is a funny with how Firefox interprets the transation styles - it seems the SVG is being shown above the content irrespetive of z-index setting.

There is also a funny where sometimes (in FF) the SVG appears to the left of its square - a refresh sorts this out.

I am still looking at it - if I find a solution I will post it here.

Nudge this thread in a couple of days if no response.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tim BrocklehurstHead of DigitalAuthor Commented:
Thanks Julian

Very glad to have your help... The site is due to launch over the weekend - at taliance.com.
If we can't find a solution to make it work in FF, then I'm guessing we'll need to configure a different block with some other reveal effect on conditional display for FF users. Doable, of course, but a shame... :)

Tim
0
Julian HansenCommented:
It is an interesting problem - I will keep at it and post back if I find anything.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tim BrocklehurstHead of DigitalAuthor Commented:
Hi again Julian

In the end we added a different 'firefox' block for each of the flip-cards and provided a 2D sliding hover effect, which Firefox can handle, instead of the card-flip effect.

Thanks for your help, but this is working fine for now.
You can see the live site - in FF and other browsers - here: http://taliance.com

Tim
0
Julian HansenCommented:
Nice, I think I prefer that effect (personally)

Thanks for the feedback. I wanted to give this another go on the weekend but ran out of time - glad you got sorted.
0
Tim BrocklehurstHead of DigitalAuthor Commented:
There was no easy answer to getting Firefox to work with the flip-card hover animation effect, so we built a different css effect for Firefox users conditionally. Thanks for your help Julian
0
Julian HansenCommented:
You are most welcome, Tim.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.