Contao 3.2.16 - Problem mit carouFredSel

[Mario.Karstaedt]

Halli hallo,

das addon funktioniert soweit sehr gut, jedoch habe ich ein Problem mit dem IE.
Zwischen den Bilder ist ein riesiger Weißraum, beim Bildwechsel, zu sehen (Bild im Anhang).

Ich hoffe mir kann jemand helfen. Da das Tool sonst alles bietet was ich benötige,
würde ich ungern ein anderes nutzen wollen.

Thx in advance.

Mario

[lucina]

Bei CSS- / browserspezifischen Problemen ist ein Link für uns sehr hilfreich.

[tab]

Und eventuell noch welcher IE, zwischen IE 7 und IE 11 gibts doch ab und zu mal kleinere Unterschiede .

[Mario.Karstaedt]

Ja sorry...es geht um den IE 11 ^^.

>>>Link<<<

[Ainschy]

Den weißen Raum zwischen den Slides sind auch im Chrome und FF zu finden.

Poste doch mal bitte deine Einstellungen zum Slider.

[Spooky]

Der Slider macht auf den <img> folgendes: left:-…px;
Dadurch entsteht der weiße Rand. Warum der Slider das macht kann ich dir momentan auch nicht sagen. Passiert vermutlich irgendwo in dieser Berechnung:

$(window).resize(function()
{
    $('#caroufredsel_57 img').each(function(e)
    {
        var ratio=$(this).attr('width') / $(this).attr('height');
        var rootWidth=$(window).width();
        var rootHeight=$(window).height();
        var backgrdCss={left: 0,top: 0,width: rootWidth,height: Math.ceil(rootWidth / ratio)};
        if (backgrdCss.height>=rootHeight)
        {
            backgrdOffset=Math.ceil((backgrdCss.height - rootHeight) / 2);
            backgrdCss.top='-' + backgrdOffset + 'px';
        }
        else
        {
            backgrdCss.height=rootHeight;
            backgrdCss.width=Math.ceil(backgrdCss.height * ratio);
            backgrdOffset=Math.ceil((backgrdCss.width - rootWidth) / 2);
            backgrdCss.left='-' + backgrdOffset + 'px';
        }
        $wrapper.css({width: rootWidth,height: rootHeight});
        $(this).css(backgrdCss);
    });
}) 

[Mario.Karstaedt]

Den weißen Raum zwischen den Slides sind auch im Chrome und FF zu finden.

Poste doch mal bitte deine Einstellungen zum Slider.

Erstmal danke ich schon mal allen für die rege Beteiligung!

Ich hab mal die Einstellungen gesnipped.

[Spooky]

Ich glaube hier handelt es sich um einen Rendering Bug in allen Browsern. Die Berechnung der Bildgrößen von Caroufredsel, sowie die Berechnung des Offsets für die Bilder ist korrekt. Auch alle Elemente der einzelnen Slides haben die richtigen Größen.

Das Problem ist, dass Caroufredsel overflow:hidden; auf den Root Element eines Slides setzt (in diesem Fall die .caroufredsel_gallery Elemente). Dadurch wird der Inhalt außerhalb des Viewports abgeschnitten - obwohl das Element eigentlich größer als der Viewport ist. Man könnte sich also mit

.caroufredsel_gallery {
    overflow:visible !important;
} 

behelfen. Besser wäre natürlich, man findet die eigentliche Ursache des Fehlers (bzw. welches zusätzliche CSS dieses Fehlverhalten möglicherweise auslöst).

[Mario.Karstaedt]

Ich glaube hier handelt es sich um einen Rendering Bug in allen Browsern. Die Berechnung der Bildgrößen von Caroufredsel, sowie die Berechnung des Offsets für die Bilder ist korrekt. Auch alle Elemente der einzelnen Slides haben die richtigen Größen.

Das Problem ist, dass Caroufredsel overflow:hidden; auf den Root Element eines Slides setzt (in diesem Fall die .caroufredsel_gallery Elemente). Dadurch wird der Inhalt außerhalb des Viewports abgeschnitten - obwohl das Element eigentlich größer als der Viewport ist. Man könnte sich also mit

.caroufredsel_gallery {
    overflow:visible !important;
} 

behelfen. Besser wäre natürlich, man findet die eigentliche Ursache des Fehlers (bzw. welches zusätzliche CSS dieses Fehlverhalten möglicherweise auslöst).

Tango Mike!

Das ganze funktioniert nun sauber, aber ich mach mich auf die suche nach dem eig. Urheber.