Slideshow plugin not displaying images in Chrome - drupal

Question

I'm new at Drupal and I'm now administrating an existing site. There's a bug that the home slider asigns a size of 0x0 to its images, so only the pager is displayed.
When you open the website in another browser, it works fine.
What could be the problem? I googled it but non of the solutions I found work.
Thanks,
Brian

Answer 1

First, it's not Drupal related issue, but it's CSS related, so you tagged it wrong and probably googled about it wrong.
Problem can be in:
a) your theme (called "Porto")
b) slideshow module if you are using one
In any case you should (temporary) disable caching of CSS on page (admin menu) Configuration -> Development -> Performace
URL:
/admin/config/development/performance
Then find out what CSS causes this issue, find out what file you should change (user Firebug or some similar tool), change the CSS file, turn on CSS cache again, clear the cache (just in case).
So, Darko's solution can be correct, but definitely there is no point of changing cached CSS file since it will be re-generated in time and you'll loose your change, but it should be applied on correct file. Instead, as I said, disable cache, find the real CSS file, change it there and clear the cache.
Or, since you have access to all CSS files you don't even have to disable the cache, but just find and fix CSS in real file and clear the cache.

Answer 2

Let's say it is CSS related problem but it is not quite correct answer here.
You can see in different browsers different render outputs based on module settings. Issue is on this setting:
element.style {
height: 460px;
position: relative;
width: 930px;
}
element.style values are the values you set up in your module (in this case view_slideshow). In Firefox you get good output (code from above) but in google chrome you got just next code:
element.style {
position: relative;
}
It is a bug for sure and it is a module related because for some reason Google Chrome not read values which are set in module. First you should try to update your slideshow module on latest release. If you still have a problem you can easily fix it via changing CSS file.
#MilanG have a good point because once you clear the cache new CSS will be generated and you will have the same problem. I will try to explain what you should with little more details.
Go on admin/config/development/performance (if you are using drupal 7) and check out option Aggregate and compress CSS files. That will disable caching of CSS.
Open Firebug on your front page and find next line:
<div id="views_slideshow_cycle_teaser_section_carrusel_home- block"class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative;">
If you use Firebug on Firefox you should find same line (but it is outputted different as you can see):
<div id="views_slideshow_cycle_teaser_section_carrusel_home-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 930px; height: 460px;">
Now you find which CSS is used on that line (it should be something like sites/all/themes/your_theme_name/css/views.css )
Find the right line in that CSS and change it like i showed you in my first post.
Clear the cache and now you go back on admin/config/development/performance and turn on caching.
Hope this helps.

Answer 3

You can fix this like this:
Go on sites/default/files/css
Open css_Ad8ea4Il0r-gy2oHf2eZpgamt3p0W3GurWCoZa6MhXU.css
Find this code in CSS:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;}
Replace it with this code:
#views_slideshow_cycle_teaser_section_carrusel_home-block{display:inline-block;height:460px;width:930px;}
Save CSS