Overloop verborgen en jQuery conflicterend in Chrome & Safari

Ik heb overal gezocht en kan hier geen oplossing voor vinden.

Ik gebruik de jQuery Cycle-schuifregelaar op een site. Het wordt gebruikt binnen een div die momenteel is ingesteld om verborgen te overlopen, terwijl de afbeeldingen zijn ingesteld op 100% hoogte en 1600 px. Ik stel de horizontale positie in via een jQuery-oproep:

Dit is de CSS:

   #large-slider {
   max-height: 600px;
   position: absolute;
   top: 0;
   z-index: -1000;
   overflow: hidden;
   margin: 0 auto;
   }

   #large-slider img {
   width: 1600px;
   height : 100%;
   }

en dit is de jQuery-oproep:

<script type="text/javascript">
// JS call for Cycle Slider
jQuery(document).ready(function(){
    jQuery('#large-slider').cycle({
    fx: 'fade'
    });
   //Centering images
    jQuery('#large-slider').css('left', -((1600 - jQuery(window).width())/2));
});
   //Centering images on resizing
        jQuery(window).resize(function(){
        jQuery('#large-slider').css('left', -((1600 - jQuery(window).width())/2));
    }); 
    </script>

NU, het probleem is dat dit in Firefox en IE9 perfect werkt. De afbeeldingen gaan de hele tijd over de volle breedte en blijven gecentreerd ongeacht wat (een deel van hen gaat buiten het scherm en we zien het niet, maar dat is perfect). In Chrome daarentegen vullen de afbeeldingen zich als 70% van de vensterbreedte, ongeacht de grootte van het venster. In Safari, raad eens: de afbeeldingen verschijnen niet eens!

Dit is echt vreemd ... ik gebruik hetzelfde script in dezelfde site met een andere grootte (zoals een gewone schuifregelaar zonder de hele breedte te vullen) en het werkt perfect, dus ik vermoed dat het probleem te maken heeft met de volledige breedte probleem, met de overloop verborgen, of zoiets. Ik weet het echt niet.

Alle aanwijzingen ??

1

Geen antwoorden

0