Anzeige: united-domains - Die ganze Welt der Domains
Einfache & schnelle Domain-Registrierung zu fairen Preisen ohne Einrichtungsgebühren. Mehr als 250 Domain-Endungen aus einer Hand inklusive E-Mail- & Web-Weiterleitung. Einzigartiges Domain-Portfolio zur bequemen & sicheren Verwaltung Ihrer Domain-Namen.
Jetzt Domain-Check bei united-domains!
Hintergrund flackert bei hover und border-radius
Autor: enigma
Datum: 12.10.2011 23:45:06
Hallo,
ich habe folgendes Problem:
Horizontales Menü, die Menüpunkte haben beim hover eine andere Farbe und abgerundete Ecken. Zeigt man beim hover mit dem Mauszeiger genau auf den Rand der abgerundeten Ecken, dann flackert die Farbe bei den Browsern IE, FF, Seamonkey, nicht aber beim Opera (jeweis die neuesten Versionen).
Ist das Problem bekannt und wie kann man es lösen ?
Code (valides Html, CSS nicht valide wegen border-radius):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hintergrund-Flackern</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font:normal 13px "Times New Roman", Helvetica, Arial, sans-serif;
}
#navigation {
float:left;
width:100%;
margin:2px 0 2.0em -0.5em;
color:#000;
background-color:#0c6;
font-size:1.4em;
}
#navigation li {
list-style:none;
display:inline;
}
#navigation a {
float:left;
margin:0.4em 0 0.4em 0.4em;
padding:0.2em 0.4em;
font-weight:bold;
color:#000;
background-color:#0c6;
text-decoration:none;
}
#navigation a:hover {
margin:0.4em 0 0.4em 0.4em;
background-color:#f93;
border-radius:8px;
moz-border-radius:8px;
}
#navigation span {
float:left;
margin:0.4em 0 0.4em 0.4em;
padding:0.2em 0.4em;
font-weight:bold;
background-color:#f93;
border-radius:8px;
moz-border-radius:8px;
}
-->
</style>
</head>
<body>
<ul id="navigation">
<li><span>Thema 1</span></li>
<li><a href="">Thema 2</a></li>
<li><a href="">Thema 3</a></li>
<li><a href="">Thema 4</a></li> </ul>
</body>
</html>
Re: Hintergrund flackert bei hover und border-radius
Autor: gaby
Datum: 13.10.2011 09:56:19
> Horizontales Menü, die Menüpunkte haben beim
> hover eine andere Farbe und abgerundete Ecken.
Moin moin ;-)
| abgerundete Ecken
... aber nur dann, wenn diese Browser CSS3-border-radius verstehen. Frühere Browserversionen, die Du mit einem proprietären Präfix ansprechen willst zeigen keine runde Ecken, weil Deine Syntax falsch ist.
http://silvankolb.de/2011/03/browserspezifische-erweiterungen/
> Zeigt man beim hover mit dem Mauszeiger genau auf
> den Rand der abgerundeten Ecken, dann flackert
> die Farbe bei den Browsern IE, FF, Seamonkey,
> nicht aber beim Opera (jeweis die neuesten
> Versionen).
Im Moment habe ich hier nur Firefox-3.6 und IE-8 unter Windows-XP, und dort (abgesehen von fehlenden runden Ecken) flackert nichts.
Tritt das Problem denn auch lokal auf, oder nur bei Dateien im Web?
Grüße
gaby
Re: Hintergrund flackert bei hover und border-radius
Autor: gaby
Datum: 13.10.2011 10:24:53
Unabhängig von dem Flackern, das ich bei meinen Browsern nicht nachvollziehen kann, habe ich noch einen Verbesserungsvorschlag:
Im LI: 'float: left' statt 'display: inline'
im A und im SPAN: 'display: block' statt 'float: left'
in A:HOVER ist 'margin:0.4em 0 0.4em 0.4em;' überflüssig, da diese Eigenschaft defaultmäßig von A auf alle Pseudo-Elemente vererbt wird.
Re: Hintergrund flackert bei hover und border-radius
Autor: enigma
Datum: 13.10.2011 12:05:10
Hallo Gaby,
danke für Deine Antwort.
Wenn Deine Browserversionen keine abgerundeten Ecken darstellen können, wirst Du auch kein Flackern sehen, denn das zeigt sich bei mir nur dann, wenn ich beim hover mit dem Mauszeiger genau auf den Rand der abgerundeten Ecke zeige.
Zu Testzwecken sollte man den border-radius auf 16px erhöhen, dann sind die Rundungen größer, und man sollte den vorausgewählten Menüpunkt "Thema 1" weglassen, denn dort tritt das beschriebene Phänomen nicht auf, eben nur beim mouseover über einen noch nicht ausgewählten Menüpunkt.
Das Flackern tritt bei mir auch lokal auf, mein BS ist Vista Home Premium.
Meine Tests haben ergeben, dass die neuen Versionen von IE und Opera border-radius verstehen und die neuen Mozilla-Versionen moz-border-radius. Das Flackern tritt im IE und im Mozilla auf, im Opera aber nicht.
Gruß
enigma
Re: Hintergrund flackert bei hover und border-radius
Autor: enigma
Datum: 13.10.2011 12:10:23
Hallo Gaby,
danke für Deine Verbesserungsvorschläge. Ich habe sie übernommen. Am Flackern hat sich aber nichts geändert.
Gruß
enigma
Re: Hintergrund flackert bei hover und border-radius
Autor: gaby
Datum: 13.10.2011 13:08:35
> Wenn Deine Browserversionen keine abgerundeten
> Ecken darstellen können, wirst Du auch kein
> Flackern sehen, denn das zeigt sich bei mir nur
> dann, wenn ich beim hover mit dem Mauszeiger
> genau auf den Rand der abgerundeten Ecke zeige.
Ich hatte Deinen Syntaxfehler beim Mozilla-Präfix bei meinen Tests bereits bereinigt, sodaß ich auch mit meiner alten FF-Version runde Ecken erhalten konnte. ;-)
Danach noch alles auf 200% vergrößert und gaaaanz langsam über die Links gehovert - kein Flackern im Firefox und IE-8.
... weder mit Deinem Original-Code, noch mit meiner Alternative.
> danke für Deine Verbesserungsvorschläge.
gern geschehen. :-)
> Ich habe sie übernommen. Am Flackern hat sich aber nichts
> geändert.
Das ist seltsam. :-/
Ein Hover-Flackern gibts hauptsächlich dann, wenn der Link bei hover nicht genauso groß ist, wie im Normalzustand.
Das ist bei Deinem Code aber in Ordnung.
Vielleicht liegts am Betriebssystem?
Evtl kann ein anderer Vista- oder Mac-Benutzer etwas dazu sagen?
Ich hatte vor Monaten bei 'text-shadow' auch das Problem, daß unter Windows-XP und Windows-Server die Darstellung ziemlich unterschiedlich war.
Grüße
gaby
---------
Edit:
http://www.sve-fre.de/selfhtml/netiquette/index.php?a=text5_5#text5_5
Re: Hintergrund flackert bei hover und border-radius
Autor: enigma
Datum: 13.10.2011 13:42:57
> http://www.sve-fre.de/selfhtml/netiquette/index.php?a=text5_5#text5_5
Korrigierter Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hintergrund-Flackern</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
font:normal 13px "Times New Roman", Helvetica, Arial, sans-serif;
}
#navigation {
float:left;
width:100%;
margin:2px 0 2.0em -0.5em;
color:#000;
background-color:#0c6;
font-size:1.4em;
}
#navigation li {
list-style:none;
float:left;
}
#navigation a {
display:block;
margin:0.4em 0 0.4em 0.4em;
padding:0.2em 0.4em;
font-weight:bold;
color:#000;
background-color:#0c6;
text-decoration:none;
}
#navigation a:hover {
background-color:#f93;
border-radius:16px;
-moz-border-radius:16px;
}
-->
</style>
</head>
<body>
<ul id="navigation">
<li><a href="">Thema 1</a></li>
<li><a href="">Thema 2</a></li>
<li><a href="">Thema 3</a></li>
<li><a href="">Thema 4</a></li>
</ul>
</body>
</html>
Re: Hintergrund flackert bei hover und border-radius
Autor: T.Jung
Datum: 13.10.2011 15:10:20
Bei mir flackert’s im Firefox 6 auf dem Mac.
Und zwar, wenn ich den Mauszeiger über den Bereich halte, der abgerundet wird. Also: Der orange wäre, wenn kein border-radius drin wäre, der aber durch diese Eigenschaft grün wird.
Äääh... kann man verstehen, was ich meine? ;-)
Kein Geflacker in Safari.
Meine Vermutung war die folgende:
Der nicht-hover-Zustand hat ja keine abgerundeten Ecken.
Wenn man die Maus über diesen eckigen Bereich bewegt, denkt sich der Firefox:
»Oh, ich bin über dem Link, ich muss den hover-Zustand anzeigen.«
Das tut er dann, aber jetzt gibt es ja abgerundete Ecken, und somit IST der Mauszeiger quasi nicht mehr über dem Link-Bereich. Also denkt sich Firefox: »Mauszeiger ist gar nicht über dem Link. Ich muss den nicht-hover-Zustand herstellen...« und der Hintergrund wird grün.
Und schon denkt sich Firefox:
»Oh, ich bin über dem Link, ich muss den hover-Zustand anzeigen.«
... und schon schaltet er auf orange... und so weiter.
Und richtig – dann habe ich bei
#navigation a {
(also dem Bereich für den nicht-hover-Zustand) ebenfalls die border-radius-Eigenschaften hinzugefügt. Da gleiche Hintergrundfarbe wie der gesamte Navi-Balken, sieht man sie ja nicht, aber doch sind sie da.
Insofern gibt es keinen »räumlichen« Unterschied mehr zwischen den beiden Bereichen. Und es flackert bei mir auch nix mehr.
HTH,
Tobias Jung
Re: Hintergrund flackert bei hover und border-radius
Autor: enigma
Datum: 13.10.2011 15:41:08
> Und richtig – dann habe ich bei
> #navigation a {
> (also dem Bereich für den nicht-hover-Zustand)
> ebenfalls die border-radius-Eigenschaften
> hinzugefügt. Da gleiche Hintergrundfarbe wie der
> gesamte Navi-Balken, sieht man sie ja nicht, aber
> doch sind sie da.
> Insofern gibt es keinen »räumlichen« Unterschied
> mehr zwischen den beiden Bereichen. Und es
> flackert bei mir auch nix mehr.
Eine super Idee,
herzlichen Dank
enigma
Re: Hintergrund flackert bei hover und border-radius
Autor: gaby
Datum: 13.10.2011 15:42:24
> Meine Vermutung war die folgende:
> Der nicht-hover-Zustand hat ja keine abgerundeten
> Ecken.
> Wenn man die Maus über diesen eckigen Bereich
> bewegt, denkt sich der Firefox:
> »Oh, ich bin über dem Link, ich muss den
> hover-Zustand anzeigen.«
> Das tut er dann, aber jetzt gibt es ja
> abgerundete Ecken, und somit IST der Mauszeiger
> quasi nicht mehr über dem Link-Bereich. Also
> denkt sich Firefox: »Mauszeiger ist gar nicht
> über dem Link. Ich muss den nicht-hover-Zustand
> herstellen...« und der Hintergrund wird grün.
> Und schon denkt sich Firefox:
> »Oh, ich bin über dem Link, ich muss den
> hover-Zustand anzeigen.«
> ... und schon schaltet er auf orange... und so
> weiter.
Genial, so wird es sein! :-)
mein Geschreibsel:
| Ein Hover-Flackern gibts hauptsächlich dann,
| wenn der Link bei hover nicht genauso groß ist,
| wie im Normalzustand.
Streng genommen trifft das auch bei enigmas Code zu.
Was so ein kleines Schnipselchen in der Ecke doch ausmacht!
Jetzt könnte man sich darüber streiten, welches Verhalten standardkonform ist: das Flackern oder Nichtflackern.
Ich bin für Ersteres.
Demnach verhalten sich Safari und Opera falsch.
Was meinst Du?
Grüße
gaby
Re: Hintergrund flackert bei hover und border-radius
Autor: T.Jung
Datum: 13.10.2011 16:01:44
> Jetzt könnte man sich darüber streiten, welches
> Verhalten standardkonform ist: das Flackern oder
> Nichtflackern.
Tja, vielleicht ist darüber sogar was in den Spezifikationen zu finden.
Hab aber gerade keine Lust, da nachzulesen... ;-)
> Ich bin für Ersteres.
> Demnach verhalten sich Safari und Opera falsch.
> Was meinst Du?
Auch für mein Empfinden ist das Verhalten von Firefox richtig, wenn es auch in gewissen Situationen ärgerlich sein kann. Aber ob das W3C es auch so sehen würde -- keine Ahnung...
Gruß,
Tobias
| 