Coding an image to flip smoothly on Safari

I've coded poster images to flip to show the description when scrolled over. It looks really good on chrome but safari makes it all glitchy. Is this something I can fix? Any advice? Sorry, I can't put the url because the website isn't live yet but here is the code I'm using.

.design-layout-poster img{ transition: 1s}

.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 

.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}

.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: purple; transition: 1s;}

Hey Larkin, gotta move that overlay with the image. 

.design-layout-poster img, .design-layout-poster .image-overlay{ 
  transition: 1s
}

.design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{
  transform: rotateY(180deg); 
  transition: 1s
} 

.image-card-wrapper{
  transform:rotateY(180deg)!important; 
  opacity:0; 
  transition: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
  opacity:1!important; 
  transform:rotateY(0deg)!important; 
  background: purple; 
  transition: 1s;
}

Does that do it?

On 3/30/2021 at 10:44 AM, WillMyers said:

Hey Larkin, gotta move that overlay with the image. 

.design-layout-poster img, .design-layout-poster .image-overlay{ 
  transition: 1s
}

.design-layout-poster:hover img,.design-layout-poster:hover .image-overlay{
  transform: rotateY(180deg); 
  transition: 1s
} 

.image-card-wrapper{
  transform:rotateY(180deg)!important; 
  opacity:0; 
  transition: 1s;
}

.design-layout-poster:hover .image-card-wrapper {
  opacity:1!important; 
  transform:rotateY(0deg)!important; 
  background: purple; 
  transition: 1s;
}

Does that do it?

Hey @WillMyers

I'm having the same issue with this glitch on the Safari browser and iPhone. Unfortunately your code didn't work either. Do you have any other suggestions? Thank you!

15 minutes ago, michaelpga said:

Hey @WillMyers

I'm having the same issue with this glitch on the Safari browser and iPhone. Unfortunately your code didn't work either. Do you have any other suggestions? Thank you!

Can you share a link to the site you're trying to do this on?

2 minutes ago, WillMyers said:

Can you share a link to the site you're trying to do this on?

Sure @WillMyers it is

www.ridgemontpartners.com.au

Thank you!!!

42 minutes ago, michaelpga said:

Sure @WillMyers it is

www.ridgemontpartners.com.au

Thank you!!!

Ok Try this bit of code instead. You will probably want to change the background from black. 

/*Card Flip Effect*/
.image-block .sqs-block-content{
  perspective: 2000px; 
}
.design-layout-poster {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  perspective: 1000px; 
}
.design-layout-poster:hover {
  transform: rotateY(180deg);
}
.design-layout-poster .intrinsic, .design-layout-poster figcaption{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.design-layout-poster figcaption{
  transform: rotateY(180deg);
  background:black;

  /*Add if Needed*/
  /*border-radius: 20px;*/
}

11 minutes ago, WillMyers said:

Ok Try this bit of code instead. You will probably want to change the background from black. 

/*Card Flip Effect*/
.image-block .sqs-block-content{
  perspective: 2000px; 
}
.design-layout-poster {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  perspective: 1000px; 
}
.design-layout-poster:hover {
  transform: rotateY(180deg);
}
.design-layout-poster .intrinsic, .design-layout-poster figcaption{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.design-layout-poster figcaption{
  transform: rotateY(180deg);
  background:black;

  /*Add if Needed*/
  /*border-radius: 20px;*/
}

 

Hey @WillMyers - hmmm this code seems to work on Chrome but not on Safari again, it is still glitching? Any advice is so much appreciated, thank you kindly 🙂

What aboutttttt This?

/*Card Flip Effect*/
.image-block .sqs-block-content{
  perspective: 2000px; 
}
.design-layout-poster {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  perspective: 1000px; 
}
.image-block:hover .design-layout-poster {
  transform: rotateY(180deg);
}
.design-layout-poster .intrinsic{
  z-index:0;
}
.design-layout-poster figcaption{
  z-index:1;
}
.design-layout-poster .intrinsic, .design-layout-poster figcaption{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.design-layout-poster figcaption{
  transform: rotateY(180deg);
  background:black;

  /*Add if Needed*/
  /*border-radius: 20px;*/
}

41 minutes ago, WillMyers said:

What aboutttttt This?

 

/*Card Flip Effect*/
.image-block .sqs-block-content{
  perspective: 2000px; 
}
.design-layout-poster {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  perspective: 1000px; 
}
.image-block:hover .design-layout-poster {
  transform: rotateY(180deg);
}
.design-layout-poster .intrinsic{
  z-index:0;
}
.design-layout-poster figcaption{
  z-index:1;
}
.design-layout-poster .intrinsic, .design-layout-poster figcaption{
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.design-layout-poster figcaption{
  transform: rotateY(180deg);
  background:black;

  /*Add if Needed*/
  /*border-radius: 20px;*/
}

 

Oh my gosh, I think that worked! I have checked on both Chrome and Safari browsers, just confirming with the iPhone now. Thank you so much @WillMyers !!

12 hours ago, michaelpga said:

Oh my gosh, I think that worked! I have checked on both Chrome and Safari browsers, just confirming with the iPhone now. Thank you so much @WillMyers !!

Huzzah!

7 hours ago, WillMyers said:

Huzzah!

It's worked perfectly on all devices and browsers, you're amazing!

You are a genius @WillMyers! Thank you!!