@
Slideshow Only Works Properly in Firefox
Updated on April 27, 2016 in Fluid Responsive Slideshow
Unfollow
mary 5 on April 23, 2016

Hello!

I chose to use FRS for a slideshow on a site that I am working on, due to the fact that it was locked down enough to keep the client from changing things, but designed well so that I could apply custom CSS. I did most of my initial testing in Firefox, then when I got to cross-browser testing, I discovered that Chrome, Safari, Opera, and Vivaldi are all not always displaying the full image. One slide will display ok, then 2 will show a portion of the picture and caption, while the rest is covered with a large white box. How can I fix this?

  • Liked by
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Cancel
mary 0 on April 23, 2016
  • Liked by
Cancel
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Message :
Cancel
mary 0 on April 23, 2016

Here’s what the slides should look like: http://www.amdesigngroup.com/test2/temp/CorrectSlide.png
Here’s the first broken one, as displayed in Chrome: www.amdesigngroup.com/test2/temp/BrokenSlide1.png
Here’s the second broken one, as displayed in Chrome: www.amdesigngroup.com/test2/temp/BrokenSlide2.png

  • Liked by
Cancel
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Message :
Cancel
mary 0 on April 23, 2016
  • Liked by
Cancel
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Message :
Cancel
zea Moderator 0 on April 25, 2016

Hi,

Sorry for late response,

What chrome version are you using? Please make sure to always using latest version

Thank you

  • Liked by
Cancel
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Message :
Cancel
mary 0 on April 27, 2016

I am using the latest version of Chrome, Version 50.0.2661.86.

I determined that this was occurring due to my use of mix-blend-mode on an element within the slider. I was able to solve the problem with the following CSS:

#image-slider #homepjc.frs-slideshow-container,
#image-slider #homepjc.frs-slideshow-container * {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}

/* this is inserted via jQuery in the main.js file and provides the top border to the caption */
#image-slider #homepjc .frs-caption-border {
background-color: #1fb25a;
-webkit-mix-blend-mode: multiply;
-moz-mix-blend-mode: multiply;
-o-mix-blend-mode: multiply;
-ms-mix-blend-mode: multiply;
mix-blend-mode: multiply;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
height: 25px;
width: 100%;
}

Thanks so much for your help!!!

  • Liked by
Cancel
Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off
Sorry, our support is not available at this time. We will reply at the next working hour.

By using the forum you are agree with tonjoo studio license agreement

Message :
Cancel
Loading more replies
You are not logged in

Please login here or simply sign up here .