Slideshow Only Works Properly in Firefox

Home
Fluid Responsive Slideshow
Slideshow Only Works Properly in Firefox

Updated on April 27, 2016 in Fluid Responsive Slideshow

mary 5 0 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

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

Cancel

mary 0 0 on April 23, 2016

Liked by

Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off

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

mary 0 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

Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off

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

mary 0 0 on April 23, 2016

Liked by

Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off

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

zea Moderator 0 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

Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off

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

mary 0 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

Support Hours:
Weekdays: 09.00 - 17.00
Weekend: Off

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

Message :

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:

<a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/">#image-slider</a></a></a> <a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/">#homepjc</a></a></a>.frs-slideshow-container, 
<a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/">#image-slider</a></a></a> <a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/">#homepjc</a></a></a>.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 */
<a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/"><a href="https://forum.tonjoostudio.com/hashtag/image-slider/">#image-slider</a></a></a> <a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/"><a href="https://forum.tonjoostudio.com/hashtag/homepjc/">#homepjc</a></a></a> .frs-caption-border {
  background-color: <a href="https://forum.tonjoostudio.com/hashtag/1fb25a/">#1fb25a</a>;
  -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!!!

Cancel

You are not logged in

Please login here or simply sign up here .

Support Category

People Involved

Related Thread