Docs

[MattHoll]

Hello.

The cards on my site work great in Safari and Chrome but the animation looks horrible in Firefox.

When the card is flipped, it flickers with the image from the opposite side.

I saw lots of people commenting on some issues with Firefox and cards on the forum and tried a lot of the stuff I saw posted but nothing worked.

In CSS, I tried these one at a time:

.x-card-outer img {
width: 100%;
}

.x-card-outer .x-face-graphic img {
width: 100% !important;
}

.x-card-outer.flipped .x-face-outer.front,
.x-card-outer:hover .x-face-outer.front {
display:none;
}

None worked. The issue remains.

I will put my website link and login in the reply.

Thanks for any help.

Edit: My Firefox is totally up to date, version 51.0.1 (64-bit) running on a one month old iMac.

[MattHoll]

This reply has been marked as private.

[Lely]

Hello Matt,

Try with the media query like this:

@media screen and (min-width:0
@media screen and (min-width:0\0) {
.x-face-graphic img{
width:100% !important;
}
.x-card-outer .x-face-inner{
position:absolute;
top:0px;
}
}
) {

.x-face-graphic img{
width:100% !important;
}
.x-card-outer .x-face-inner{
position:absolute;
top:0px;
}
}

Hope this helps.

[MattHoll]

Thanks for helping, but that didn’t work. Still has the same problem.

[MattHoll]

This is the CSS I have for the cards, some of which was used to fix some formatting issues. All supplied by tech support here on the forum.

.x-card-outer .x-face-inner {
height: auto;
}
@media (max-width:1000px) and (min-width:767px){
.x-card-outer .x-face-title {
font-size: 18px;
}
}

a.x-face-inner-button:hover {
background-color: rgb(32, 28, 64);
color: rgb(242, 117, 85);
}

a.x-face-button:hover {
background-color: rgb(242, 117, 85) !important;
color: rgb(32, 28, 64) !important;
}

[Joao]

Hi There,

It seems fine on my end.

Please clean firefox cache and test it again.

If the issue persists please provide a video recording so we can take a look.

Thanks

Pozdrav!

[MattHoll]

Ha! Pozdrav!

On my end it still has this issue. I always clear the cache every time I test it.

Video is here:

[video src="http://matthollingsworth.com/videos/card_flip.mp4" /]

[MattHoll]

If you go frame by frame you can see that when the card first flips, the image from the other side is visible in reverse as if there is transparency set on the card. See attached image.

[MattHoll]

Any ideas here?

[Rad]

Hi there,

Another support here and can’t reproduce the issue from your video recording to my firefox or other browsers. What browser version you’re testing it with? And what device?

Thanks!

[MattHoll]

Firefox is totally up to date, version 51.0.1 (64-bit) running on a one month old iMac.

[MattHoll]

And a friend replicated the problem with FF 52, Win 7 SP1, laptop

[Rad]

Hi there,

I checked it on Windows 10, Windows 7, MAC El Capitan Firefox (all latest version) and I’m not getting any issue similar to your video recording. Is that a hybrid device? Like laptop + touch screen?

Thanks!

[MattHoll]

No. I am on an iMac with Sierra.

[Rad]

Hi there,

Thanks, I’ll update my OS to Sierra 🙂

I’ll let you know if I find something.

Thanks!

[Author]

Posts