Fade does not work on Chrome 27 #159

prekageo opened this Issue Mar 6, 2013 · 7 comments


None yet
6 participants

prekageo commented Mar 6, 2013

Test case

<!DOCTYPE html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="responsiveslides.js"></script>
  <link rel="stylesheet" href="responsiveslides.css" type="text/css">
  <div style="height:300px;width:300px">
    <ul class="rslides">
      <li><img src="http://www.google.com/images/srpr/logo4w.png"></li>
      <li><img src="http://www.google.com/logos/2013/kenya_election_day_2013-1204005-hp.jpg"></li>
      <li><img src="http://www.google.com/logos/2013/miriam_makebas_81st_birthday-1417005-hp.jpg"></li>
  <script type="text/javascript">
  $(function() {

Possible fix

diff --git a/responsiveslides.js b/responsiveslides.js
index 1e6f465..9fd89fe 100644
--- a/responsiveslides.js
+++ b/responsiveslides.js
@@ -68,8 +68,8 @@
         $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),

         // Styles for visible and hidden slides
-        visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
-        hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},
+        visible = {"opacity": 1, "zIndex": 2},
+        hidden = {"opacity": 0, "zIndex": 1},

         // Detect transition support
         supportsTransitions = (function () {

viljamis commented Mar 6, 2013

Chrome 25 is the latest stable version. Chrome 26 and 27 are beta versions, so, if this issue still exists when v27 is actually out I will definitely fix it.

Unfortunately the above fix works in Chrome 27 but not IE 7 - 9.

Problem: Sometimes the slide disappears after the fade has completed

I may take a look at a fix also as I use Chrome 27, but since it has not been officially released there may be changes which may not require a fix, so might just wait.

Thanks anyway for the suggestion

it was fixed by Google on the new 27' version :-)
Thank you for your help

viljamis closed this Apr 16, 2013

@kaz0636 kaz0636 referenced this issue in kaz0636/ResponsiveSlides.js Jun 24, 2013

@kaz0636 kaz0636 Fixed crossfade for iPhone Safari & Android Chrome
Fixed crossfade for iPhone Safari & Android Chrome

crudbug commented Jul 19, 2013

I am facing this issue with all webkit related browsers - Chrome 28 , Safari 6, Opera 15. Firefox works perfectly.


viljamis commented Aug 2, 2013

@crudbug Does it also happen here? http://responsiveslides.com …or do you possibly have a demo online somewhere?

crudbug commented Aug 2, 2013

@viljamis I was testing this in my project. Now everything works perfectly. Thanks !

I was seeing the same problem in Chrome 32 (and previous versions).

The short answer, make sure your page has the HTML5 declaration at the top:

If it's not there, fade will not work.

The other fix, I think, is:


      if (supportsTransitions) {

Replace with:

   if (supportsTransitions) {
          .css('display', 'block')

Quickly tested in IE8+, Chrome and FireFox.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment