Avatar of Tim Brocklehurst
Tim BrocklehurstFlag for United Kingdom of Great Britain and Northern Ireland

asked on 

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

CSSHTMLFirefox

Avatar of undefined
Last Comment
Julian Hansen
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Tim Brocklehurst

ASKER

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

It is an interesting problem - I will keep at it and post back if I find anything.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

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.
Avatar of Tim Brocklehurst

ASKER

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
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

You are most welcome, Tim.
HTML
HTML

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo