Slideshow is Overlapping in Chrome and Firefox

Do you have a case study that could be looked at?

sometimes i get issues on Chrome and Safari.
the slideshow does not render at all when it happens.

oops wrong version, nevermind, i meant in D6

I'm having the same problem. I'm using Drupal6 and my slide show works great in FF and IE. But in Chrome (and apparently Safari though I haven't seen it) it overlaps.

Basically I set the slideshow up in a block and then added that block to my left sidebar. In Chrome and Safari it sits right on top of the block above and below it, blocking my logo and most of me What's New links.

You can see it at www.apcc.org.

Thank you!!

Seems like slide sizes aren't being used correctly
Have you tried enabling "Wait for all the slide images to load"?

Where is that option? I don't see it in views.

It is within the "Cycle options" fieldset of the "Style settings" of the view
Immediately below the "Items per slide" input

Bear in mind that I am running 7.x-3.x-dev
However if I recall correctly 6.x and 7.x are being concurrently maintained so this shouldn't be an issue
Checking the code base seems to verify this

So if you still can find it I would try an update to the latest dev

Moving back to 7.x APCC did the wait for all the slide images to load work?

I think it worked. It looks fine on my computer and no one has complained recently. Thank you for your help!!!

don't have that option (Wait for all the slide images to load) in Drupal 6.20 with Views 2.12 and Views Slideshow 2.3

is that available only on the 6.x-3.x series and up? 7.x-3.x?

SingleFrame options
Timer delay:
Amount of time in milliseconds between transitions. Set the value to 0 to not rotate the slideshow automatically.
Initial slide delay offset:
Amount of time in milliseconds for the first slide to transition. This number will be added to Timer delay to create the initial delay. For example if Timer delay is 4000 and Initial delay is 2000 then the first slide will change at 6000ms (6 seconds). If Initial delay is -2000 then the first slide will change at 2000ms (2 seconds).
Speed:
Time in milliseconds that each transition lasts. Numeric only!
Start Slideshow Paused
Start the slideshow in the paused state.
Make the slide window height fit the largest slide:
If this is set to no then if the slides are different sizes the height of the slide area will change as the slides change.
Random:
False
True
This option controls the order items are displayed. The default setting, False, uses the views ordering. True will cause the images to display in a random order.
Pause:
Yes
No
Pause when hovering on the slideshow image.
Pause On Click:
Yes
No
Pause when the slide is clicked.
Pause When the Slideshow is Not Visible
When the slideshow is scrolled out of view or when a window is resized that hides the slideshow, this will pause the slideshow.
How to Calculate Amount of Slide that Needs to be Shown:
Choose how to calculate how much of the slide has to be shown. Entire Slide: All the slide has to be shown. Vertical: Set amount of height that has to be shown. Horizontal: Set amount of width that has to be shown. Area: Set total area that has to be shown.
Amount of Slide Needed to be Shown:
The amount of the slide that needs to be shown to have it rotate. You can set the value in percentage (ex: 50%) or in pixels (ex: 250). The slidehsow will not rotate until it's height/width/total area, depending on the calculation method you have chosen above, is less than the value you have entered in this field.
Start On Last Slide Viewed
When the user leaves a page with a slideshow and comes back start them on the last slide viewed.
Length of Time to Remember Last Slide:
The number of days to have the site remember the last slide. Default is 1
Controls:
Determine if controls for the slideshow (start/stop/next/previous) should appear, and if so whether they should appear before or after the slideshow.
Pager:
Determine if a pager for the slideshow (1|2|3) should appear, and if so whether they should appear before or after the slideshow.
Pager Type:
What the pager should look like. Thumbnails grabs the first image in each slideshow item.
Activate Slide and Pause on Pager Hover:
Should the slide be activated and paused when hovering over a pager item.
Make Pager Linked to Slide Link
Should the pager use the main frame link so when it is clicked it goes to the same url that the main frame goes to when clicked.
Image Counter:
Determine if the Image Counter (1 of 4) should be displayed and if so whether they should appear before or after the slideshow.
Items per slide:
The number of items per slide
Effect:
The transition effect that will be used to change between images. Not all options below may be relevant depending on the effect.
Sync:
Yes
No
The sync option controls whether the slide transitions occur simultaneously. The default is yes which means that the current slide transitions out as the next slide transitions in. By setting the sync option to no you can get some interesting twists on your transitions.
End slideshow after last slide:
If you select yes the slideshow will end when it gets to the last slide.
Advanced Options:
Add other jQuery cycle options one per line. Ex. height: 350 Click here for the additional options to add.
Internet Explorer Options
ClearType:
True
False
True if clearType corrections should be applied (for IE). Some background issues could be fixed by setting this to false.
ClearType Background:
True
False
Set to true to disable extra cleartype fixing (leave false to force background color setting on slides)

It's a fairly recent addition (Late Jan/Early Feb if I recall) and I believe it has only been applied to the 3.x branch

Problem fixed. No need for follow up.

I don't see that the issue of views slideshow overlapping content has been addressed. I encountered the same problem using Chrome and Firefox. I added a views slideshow block to the front page just below the login block. The login block then became inaccessible. I had to change the z-index on the login block in order to gain access to it. Firebug reveals that the block containing the slideshow view is as tall as the sidebar it is in. I tried adjusting the height of the slideshow block in css but was unsuccessful.

Surprisingly, there was no problem when I viewed the page in IE.

You can view the problem at http://firetrainingcenter.org/

I'm looking at your site and everything looks fine. I tried firefox and chrome. Could this be a windows only issue?

Right, it isn't an issue now because of the changes I made to the z-index of the block above the slideshow. Before doing that, the slideshow transparently covered the block above so that I could not access the username or password fields or the log in button. Inspecting the slideshow with Firebug reveals that the slideshow block, "block-views-fireball-slideshow-block-2", covers the entire sidebar with a transparent window.

I got it to function with the work-around described above, however, this behavior seems odd and may frustrate other users of the module.

Okay, I got the slideshow to behave by applying the style "height : auto" to the id for the views slide show. Never had to do this to any other blocks before.

I'd like to re-open this issue. I'm having the same issue as above.

I had created the new slideshow from scratch and was working properly a week ago. Today it showed the overlap in Safari and Chrome. I may have updated Views since I created the slideshow but quite frankly I can't remember.

I'm using Views 6.x-2.16 and Views Slideshow 6.x-2.3 so I do not have the option to enable "Wait for all the slide images to load" under slideshow advanced options in views.

I've tried adding height: auto and height: 315 to the advanced option under the slideshow setting in views. Neither works.

The block displays properly if there is only one picture in the slideshow (I know, why use a slideshow for one image...i'll be adding more later :-) ).

The site has a slideshow on the home page that was created a while back and it displays correctly. I put that slideshow on the new page and it also displays correctly. So I cloned the homepage slideshow and added the new images... new cloned slideshow doesn't display correctly.

Also, doesn't matter if it's in a panel or a block. I've tested both.

Here are my screenshots

Recently upgraded from Drupal 7.12 to Drupal 7.14. Prior to the upgrade I had several blocks of slideshow gracefully displaying on the homepage in a lovely cyclic manner as desired. After upgrading, the cycling stopped and when I managed to figure out the problem (being it appears views cyclic slideshow doesn't "like" Drupal's core js compression option (found in the Performance page for caching ..etc). After turning of js compression, the slideshows started to cycle except, the slide content would appear out of the block it was assigned to and literally on top of the block region it was in.

After some rummaging around, it turned out that, turning off the views slideshow: Cycle setting under "Actions" section, "View Action Advanced Options" - "Make the slide window height fit the largest slide" made the problem go away and the slides show within their block as desired.

I hope this helps someone. (I love the work these folks put into making Drupal and modules! Thank you)

Having this same issue. (Screen shot attached for an example). I have 4 articles up per slide. I have tried turning 'Make slide window height fit largest slide' on and off...off usually results in the slide completely collapsing.

I have the Advanced Option of slideResize set to 0 for jQuery Cycle Custom Options. This fixed the now 'overlapping text/slide' to be shoved down during the transition causing the page to resize in the middle.

I have the following css setup to fix an issue with the row not resizing properly after the initial page load
.views-slideshow-cycle-main-frame {
position: relative !important;
width: 100% !important;
}

But the text from the next slide still overlaps during the transition. I can get it to cooperate by removing the css, but then I sacrifice the responsive portion - which I'm not willing to do - It must be responsive.

I am having a big issue with my slideshow. I am using views slideshow ThumbnailHover 6X-2.3 and i had just made the slideshow last night and it was working perfect (going thru the slides and all), well I started themeing the slideshow with css using the css injector module and it was all good well i finally fine tuned the design were i wanted it to be (fitting it in the product pages perfect and all). Now all of a sudden instead of the slideshow working perfect like it was it actually shows the first image and then the second image right below it ect. Also the thumbnails are not clickable and do not change the main image. I have tried every solution on this thread with no avail even the height:315 in the advanced slideshow options and still a no go. I have a screenshot attached to show you what I mean. So I thought is was the css I had done so I went ahead and disabled the css file i made and of course it went bak to its ugly non styled slideshow but still the images werent working and no slideshow functionality. I dont know what has happened and i really need help. This is the last step to create a beautiful product page for iLLuSioN GrOuP PCs and I have a dead line to accomplish so please help me ASAP. Here is a link to the page https://www.illusiongrouppcs.com/product/asus-rampage-iv-extreme-s2011
Thanks

Okay guys i got it, in the field image settings i had group multiple values selected which caused the slideshow to think there was only one image so i unchecked it and viola, it works!

Re-opening this as the problem still exists, at least in the 2.x branch.

It's not specific to the ThumbnailHover version either; I'm using SingleFrame and seeing it there too. (Not sure what the difference is between these modes anyway.)
In FF, Chrome, and even the dreaded IE, a block containing the slide show is just fine. In Safari, the images overlap the text that should be below the block. (I must admit that based on my reading of CSS positioning rules, this makes more sense than the other browser's behavior, but it's not what I want.)

If someone finds a solution, even a CSS override, please let me know. If I find something I'll post it.

The plot thickens:
In Safari, if I click on a slideshow image, which has been set to take me to the node, and then click the back button, Safari's behavior matches the other browsers. Also if I refresh the page by hitting return in the URL bar, there's no overlap, but if I refresh using the little circular arrow icon, the overlap returns.

New information:
The reason why this is happening appears to be more Javascript-related than CSS, i.e., it is improper CSS being generated by the Javascript.
What I am seeing (via Firebug and the other browsers' inspectors) is that during the slide transition, the styles on the <div> that contains all the slide ([id^="views_slideshow_singleframe_teaser_section_"] and its child <div> 's have style attributes including a height value. These heights are being incorrectly calculated in the cases where I'm seeing the overlap.
In my particular instance, the correct height is 561px, which I assume is being calculated based on the height of the largest image. When the overlap is present this height is 75px.

Problem partially handled: Not sure if this is a general solution, but I found that by moving all my <script>s from the <head> to the bottom of page.tpl.php, i.e., print $scripts; , everything looks good more often.

I still get the overlap on a "hard refresh" in Chrome (i.e., hold shift while clicking the circular arrow)

Update: The problem is that Chrome starts loading all the scripts before the images. That's apparently something baked in. As a result the the javascript is miscalculating the height because the image information isn't necessarily present. On a standard page refresh, cached image info is already there, so the calculation is always correct.

I have found that adding a piece of javascript to my theme can force a recalculation of the heights after all the images have loaded:

// Ignore the surrounding php tags. This is jQuery of course. The tags are just there for readability.

var count = $('.views_slideshow_slide img').length;
$('.views_slideshow_slide img').load(function(){
    count--;
    if(count == 0){
        var max_height = 0;
        $('.views_slideshow_slide img').each(function(){
            if($(this).parents('.views_slideshow_slide').height() > max_height){
                max_height = $(this).parents('.views_slideshow_slide').height();
            }
            $(this).removeAttr('height').removeAttr('width');
        });

        $('#views_slideshow_singleframe_teaser_section_Story_SlideShow-block_1').height(max_height);

    }
});

For those looking for a D7 solution, the following worked for me (I'm on 7.39 with Views Slideshow Cycle 7.x-3.1): In my theme's html.tpl.php file, I moved print $scripts; from within the head tag area to just above the closing body tag. Cleared cache and no more overlap in Chrome.

Support for Views Slideshow 6.x is mostly deprecated (ie bug fixes and major errors may be looked at and security issues, but not really anything else), so closing.