upgraded from 1.6 to 1.7 (and 1.x) :

First image is Ok but not 2nd and others.

got the last cycle plugin.

downgraded to 1.6 : all work fine.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ianthomas_uk’s picture

This is a regression caused by http://drupal.org/node/1228266

The problem is the following CSS rule, from field_slideshow.css

.field-slideshow-slide, .field-slideshow-slide a, .field-slideshow-slide img {
  max-width: 100%;
  height: auto !important;
  width: auto !important;
}

From my testing it seems that Chrome is calculating a width/height of 1px when the slides are hidden, and not recalculating them when the slide gets shown. This code is intended to support responsive designs, but seems a poor implementation as it is fighting with the js library (jquery cycle?) that is setting explicit widths and heights on these elements.

I don't fully understand the code and what is meant to set what sizes where and on what, but the attached patch solves the problem for me.

I've also split the multiple css selectors onto separate lines as per http://drupal.org/node/302199

ianthomas_uk’s picture

Status: Active » Needs review
idflood’s picture

Hi,

Thanks for reporting the issue and proposing a patch. What was the issue? "Empty" slides? I tried to reproduce the issue but without success (chrome, latest cycle plugin, field_slideshow 1.81). Any idea of a module or some settings I may be missing?

I would prefer not to kill the responsive slideshow support so it would be better if we can find another solution.

steven.d’s picture

See the following issue, it's the same: https://drupal.org/node/1994804

it works fine in Firefox and IE, but in chrome, when the slide transitions to the next slide (on ScrollHorz) the next slide starts out really small and grows until its the correct size.

I tried inspecting the css for the item, and turning each of them off separately:

.field-slideshow-slide img {
max-width: 100%; --> if only this one is turned off, it works
height: auto !important; --> if only this one is turned off, the image is the correct height, but scales across the width
width: auto !important; --> if only this one is turned off, it works
}

Hope that helps..

lamp5’s picture

Version: 7.x-1.x-dev » 7.x-2.x-dev
Issue summary: View changes
Status: Needs review » Closed (duplicate)
Related issues: +#2661500: Wrong CSS is causing slide effects to grow vertically