Fade does not work on Chrome 27 #159

Closed
prekageo opened this Issue Mar 6, 2013 · 7 comments

Comments

Projects
None yet
6 participants

prekageo commented Mar 6, 2013

Test case

<!DOCTYPE html>
<html>
<head>
  <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">
</head>
<body>
  <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>
    </ul>
  </div>
  <script type="text/javascript">
  $(function() {
    $('.rslides').responsiveSlides();
  });
  </script>
</body>
</html>

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 () {
Owner

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

Hello,
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
5b6c4f4

crudbug commented Jul 19, 2013

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

Owner

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:

Find:

      if (supportsTransitions) {
        $slide
          .show()
          .css({

Replace with:

   if (supportsTransitions) {
        $slide
          .show()
          .css('display', 'block')
          .css({

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