Coverflow slider safari bug

[murielg]

trafficstars

@lukeed I have a coverflow slider with 9 slides and the following settings

glSlider = new Bee3D(coversSlider, {
  effect: 'coverflow',
  focus : 4,
  navigation : {
    enabled : true
  },
  listeners: {
    keys: true,
    touches: true,
    clicks: true,
    drag: true
  },
  autoplay : {
    enabled : true,
    pauseHover : true,
    speed : 5000
  },
  loop : {
    enabled : true,
    continuous : true,
    offset : 3
  }
});

Whenever the last slide on the left (or right) has to loop around and go behind the other slides to land on the opposite side, it can be seen for a split second through the center of the slider.

I only see this bug on safari, desktop and mobile.

Any ideas on a possible fix for it?

Thanks!

[lukeed]

Hi @murielg !

Unfortunately, this just came to my attention a few weeks ago too. It's a zindex + position:absolute issue with Safari that I can't do anything about. I've actually found an issue reported to the Safari team about it.

Well, I should say that I could get around it by reworking EVERYTHING to be done with a different position value, but that'd be more computational work for the script, thus hurting its performance across all browsers, including Safari anyway.

I think I value 60fps & no performance jitters more than an image overlay bug in 1 browser =/

Does that seem reasonable to you?

[icdindia]

i have figured out a way to make it work by modifying the style. I like this look and feel even more than the original:

.bee3D--effect__coverflow .bee3D--before-3
{
    display: none;
}
.bee3D--effect__coverflow .bee3D--before-2
{
    -webkit-transform: translateX(-600px) rotateY(-42deg) scale(0.7);
    transform: translateX(-600px) rotateY(-42deg) scale(0.7);
}
.bee3D--effect__coverflow .bee3D--before-1
{
    -webkit-transform: translateX(-570px) rotateY(-42deg) scale(0.8);
    transform: translateX(-570px) rotateY(-42deg) scale(0.8);
    opacity: 0.3;
    z-index: 9;
}
.bee3D--effect__coverflow .bee3D--after-1
{
    -webkit-transform: translateX(570px) rotateY(42deg) scale(0.8);
    transform: translateX(570px) rotateY(42deg) scale(0.8);
    opacity: 0.3;
    z-index: 9;
}
.bee3D--effect__coverflow .bee3D--after-2
{
    -webkit-transform: translateX(600px) rotateY(42deg) scale(0.7);
    transform: translateX(600px) rotateY(42deg) scale(0.7);
    opacity: 0.3;
    z-index: 9;
}
.bee3D--effect__coverflow .bee3D--after-3
{
    display: none;
}

I hope it helps!!!

[lukeed]

@icdindia your code turned it into more of a carousel effect. I don't think this is helpful to the bug at hand.

[icdindia]

yes, but I see that you have closed the issue. Have you been able to resolve it??

[lukeed]

I closed another issue that duplicated this one. I did not close this thread.