nicht angemeldet
Probleme von Chrome und Opera mit externen Stylesheets
0 
marctrix
0 0 marctrix
-1 0 
JürgenB
0 1 
Matthias Apsel
1 JürgenB
0
Probleme von Chrome und Opera mit externen Stylesheets
Gunnar BittersmannIch möchte eine HTML-Datei laden, die ein Bild anzeigt. Beim Hovern mit dem Mauszeiger über das Bild soll ein zweites Bild darüber geblendet werden. Das CSS hole ich aus einer externen Datei.
Das funktioniert in allen Browsern einwandfrei, außer bei Chrome. Hier wird zunächst das Overlay-Bild geladen und blendet dann sofort über auf das Originalbild. Danach funktioniert der Effekt erwartungsgemäß. Aber dieser Fehler tritt nur auf, wenn das CSS in einer externen Datei steht! Kopiere ich den gesamten Inhalt der CSS-Datei instream in das <style>-Element der HTML-Datei, klappt das auch bei Chrome problemlos!
Hier der Inhalt meiner Dateien zum Nachvollziehen:
hover-bild.HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="hover-bild.css">
<style>
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="BILD-1.JPG" alt="Avatar" class="image">
<div class="overlay">
<img src="BILD-2.JPG" alt="Avatar" class="image">
</div>
</div>
</body>
</html>
hover-bild.CSS:
.container {
position: relative;
width: 30%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
Ich benutze Chrome Version 74.0.3729.157 (Offizieller Build) (64-Bit)
-
Hej Andreas,
ich kann dir jetzt erst mal nur so glauben, dass alle Deine Angaben stimmen, aber dann habe ich leider auch keine Lösung für Dich, außer einen anderen Effekt zu wählen…
Marc
--
Ceterum censeo Google esse delendam-
Hej Marc,
das sind die Antworten, die einen nach vorne bringen! Hab trotzdem vielen Dank! War sicher gut gemeint!
Man hat ja immer die Hoffnung, dass so eine Problembeschreibung mal von jemandem gelesen wird, der das Problem kennt und eine Lösung dafür hat! Oder vielleicht ein Chrome-Entwicker das liest und sagt, "Ej, Shit, hier haben wir einen verdammten Bug unter der Haube!" Oder einer, der sagt, "Kein Problem! Wir kennen das, und beim nächsten Release ist der Bug behoben!" Oder so ähnlich...
Ich hab mitlerweile immerhin einen Workaround für den Effekt gefunden: Ich kann die CSS-Datei weiterhin extern benutzen, muss für die Klasse ".overlay" aber das Attribut "opacity" in das <style>-Element meiner HTML-Datei bringen. Das sieht dann so aus:
<head> [...] <link rel="stylesheet" href="hover-bild.css"> <style> /* workaround für Google Chrome */ .overlay { opacity: 0; } </style> [...] </head>Das ist nicht toll, aber augenscheinlich noch besser, als das komplette CSS zigfach in die HTML kopieren zu müssen.
...ansonsten nehme ich gern auch Tipps, in welchem Forum eine solche Frage besser aufgehoben wäre! Danke!
-
Hej Andreas,
das sind die Antworten, die einen nach vorne bringen! Hab trotzdem vielen Dank! War sicher gut gemeint!
Selbstverständlich. Ich habe Codepens mit diversen Überblendeffekten, die in jedem Browser funktionieren. Hätten wir gerne drüber reden können. Aber dafür müsstest du dich konstruktiv einbringen.
Was andere Foren betrifft: Nach Deiner Art an einer Lösung für dein Problem mitzuwirken empfehle ich dir keins. Ich möchte nicht schuld sein, dass du anderen auf den Keks gehst.
Marc
--
Ceterum censeo Google esse delendam-
Hej HTMHeld!
du hast hier im Gegensatz zu mir tatsächlich noch kein einziges konstruktives Statement abgegeben. Fragt sich, wer hier der Community auf den Keks geht...
-
Hallo,
wo kann man sich denn deine Testseite ansehen?
Gruß
Jürgen-
Hallo Jürgen,
ich habe oben den completten Code gepostet. Du brauchst nur die beiden Dateien damit anlegen, Bild1.jpg und Bild2.jpg mit zwei Bildern aus deinem Bestand ersetzen (idealerweise mit zwei formatmäßig vergleichbaren) und dann die HTML-Datei mal in den verschiedenen Browsern starten.
-
Hallo Andreas Neff,
ich habe oben den completten Code gepostet.
Mach es potenziellen Helfern so einfach wie möglich und stelle ein online-Beispiel zur Verfügung.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯ -
Hallo,
ich habe oben den completten Code gepostet. Du brauchst nur die beiden Dateien damit anlegen, Bild1.jpg und Bild2.jpg mit zwei Bildern aus deinem Bestand ersetzen (idealerweise mit zwei formatmäßig vergleichbaren) und dann die HTML-Datei mal in den verschiedenen Browsern starten.
dann eben keine Hilfe von mir..
Gruß
Jürgen-
Sorry, die Seite war für kein Online-Projekt gedacht, sondern für eine kleine private Präsentation. Deshalb steht sie auch nirgendwo online sondern nur auf meiner Festplatte, bzw. ein paar Posts weiter oben.
Ich bin wohl noch ein Forumsreisender der alten Schule. Früher war es mehr als zuvorkommend sich nicht erst bitten zu lassen, ein paar präzise Angaben zu seinem Problem zu machen, sondern das komplette Skript gelich mitzuposten, so wie ich das oben gemacht habe.
Jemand, der sich WIRKLICH mit HTML und CSS auskennt, braucht sich wahrscheinlich nur die paar Zeilen da oben angucken und weiß dann was los ist. Aber die finde ich wahrscheinlich nur im englischsprachigen Raum. Irgendwie bin ich hier wohl in einem Nest von eingeschnappten Zeit-Totschlägern gelandet. Vielen Dank! Schlaft weiter!
-
Wenn ich dein CSS wie folgt abändere habe ich den von dir beschriebenen Effekt im Google Chrome nicht mehr
.container { position: relative; width: 30%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; display: none; } .container:hover .overlay { opacity: 1; display: block; }Vielleicht kommst du damit ja weiter.
-
Ja, so sieht der Ansatz zur Lösungsfindung eines Problems aus! Vielen Dank dafür Bernd!
Das stimmt, augenscheinlich bleibt der Effekt aus. Allerdings hat dann das transition-Attribut keine Wirkung mehr. Das Bild schaltet sofort um und wird nicht überblendet.
Außerdem wird beim Firefox beim ersten Hovern kurz die eingestellte Hintergrundfarbe angezeigt (ein kurzes hellblaues Blitzen).
War aber eine gute Idee, das Bild erst aus- und dann wieder einzuschalten. Aber leider behakt sich das auf andere Weise.
-
Wie gefällt dir dieses, wenn du den sanften Übergang haben willst
.container { position: relative; width: 30%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; background-color: #008CBA; opacity: 0; } .container:hover .overlay { visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.5s linear; }-
Haha, das gefällt mir schon ganz gut!!! Wenn das jetzt auch noch in die andere Richtung funktioniert, wäre das der perfekte Workaround! Also ich meine, wenn man mit dem Mauszeiger wieder vom Bild runter geht, wird jetzt immer noch einfach zurück geknipst. Wäre halt schön, wenn's genauso smooth zurückläuft.
Ich sehe schon, dass ich mich demnächst wohl eingehender mit den Anzeigeattributen beschäftigen muss...!
-
@@Andreas Neff
Wenn das jetzt auch noch in die andere Richtung funktioniert,
Dazu muss
transitionfür.overlayangegeben werden.LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Ja klar! Supercool! Das funtioniert jetzt sehr gut so! Herzlichen Dank für den kleinen Schlag auf den Hinterkopf! 😉
-
-
-
-
-
-
-
-
-
-
-
-
-
-
... und wenn Du die Bilder und den opacity-Wert tauschst?!
D.h. das Overlay bei
:hoverausblendest (statt es einzublenden).Demo: https://codepen.io/anon/pen/XwVoGK
(Hab gerade keinen Chrome zur Hand, in dem ich es testen könnte.)
PS: Es wäre hilfreich, wenn Du bei der nächsten Gelegenheit selbst eine Demo bereitstellst. Dienste wie codepen.io sind dafür gemacht (und erfordern oft keine Registrierung). Ansonsten ist es eine Problemschilderung wie man sie sich wünscht 😀
-
Unfassbar! Das funktioniert einwandfrei! Lösung Nummer Zwei! (Oder eigentlich Lösung Nummer Eins...?)
Kapieren tue ich das allerdings nicht, warum es anders herum eine Macke hat! Also, zumindest bei Chrome und Opera.
Jedenfalls ganz herzlichen Dank bis hierhin euch allen, für die schnelle und vor allem erfolgreiche Hilfe!
-
...und danke, für die freundliche Starthilfe in die Forumsgepflogenheiten, djr! Ich werde mir den Dienst mal anschauen! 😀
-