Darstellungsproblem in Chrome

[Rolf B]

Hallo alle,

ich habe auch eine Navigation, nicht nur beat. Meine nicht allerdings viel billiger.

Aber ich habe damit Darstellungsprobleme, und eine reduzierte Fassung davon sieht im HTML so aus - es gibt auch ein Fiddle damit, siehe problematische Seite.

<header>Kopf oder Zahl</header>
<nav><ul>
<li><a data-value="aaa" href="#">AAA</a></li>
<li><a data-value="bbb" href="#">BBB</a></li>
</ul>
<ul>
<li><a data-value="yyy" href="#">YYY</a></li>
<li><a data-value="zzz" href="#">ZZZ</a></li>
</ul></nav>
<main>
<h2>Hauptsache</h2>
</main>
<footer>Siehe unten</footer>

Die href sind verkürzt.

Ich habe eine einfaches Fullscreen-Schichtenlayout mit flexbox und style die Navigation mit ein paar Gradienten. Es ist jetzt nicht vollständig, nur das nötigste zur Veranschaulichung meines Problems.

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
body { display: flex; flex-direction: column;}

header { height: 50px; background-color: #fcc; }

nav {
  display: flex; justify-content: space-between;
  border-top: 1px solid black; background: linear-gradient(to bottom, #c4bfbc 0, #c4bfbc 30%, white 60%);
  padding: 0 1em;
  margin-bottom: 0.5em;
}

nav ul {
   display: flex;
   list-style-type: none;
   padding: 0;  margin: 0 1.6em; height: 1.6em;
   background-image: linear-gradient(to bottom, #baa 0, #baa 40%, #554 95%, transparent 100%);
   position: relative;
}

nav ul::before, nav ul::after {
    content: " ";
    display: block; width: 1.6em; height: 1.6em;
    position: absolute; top: 0;
}

nav ul::before {
    left: -1.6em;
    background-image: radial-gradient(1.6em at 100% 0, #baa, #baa 40%, #554 95%, transparent 100%);
}

nav ul::after {
    right: -1.6em;
    background-image: radial-gradient(1.6em at 0 0, #baa, #baa 40%, #554 95%, transparent 100%);
}

nav a {
    display: block;
    box-sizing: border-box; height: 1.6em;
    padding: 0 2em; margin: 0;
    border: none; font: inherit; background:none;
}

main { flex: 1 0 auto; padding: 0 2em; background-color: #8c8; }

Die Originalversion hat ein paar hover- und focus Effekte um die aktiven und fokussierten Links darzustellen, die habe ich jetzt weggelassen und ändern nichts am Problem.

Das Ergebnis sieht dann so aus.

Das Problem sieht man, wenn man das Bild zoomt: Die Link-Leiste und die Viertelkreise sind beide 1.6em hoch, aber visuell passt es nicht ganz. Die Link-Leiste ist ein Pixel zu hoch. Im Firefox ist das nicht so; im IE übrigens auch nicht. Ich habe in Chrome aber nur die Wahl zwischen Teufel und Beelzebub, wenn ich die Links von 1.6em auf 1.599em verkleinere, sind sie ein Pixel zu niedrig. Ich kann auch die Prozentwerte der Gradienten ändern, dann passt es zunächst - bis ich die Seite zoome. Dann zoomt Chrome auf einmal die Links anders als die Abrundungen, und abweichende Gradienten-Übergänge reißt es auseinander.

Es wird besser, wenn ich die Höhe nicht auf den Links, sondern auf dem nav Element festlege. Aber nicht wirklich gut. Diese Treppe zwischen Abrundung und ul-Teil bleibt.

Vielleicht bin ich ja einfach nur anal. Aber es nervt mich trotzdem :). Ist das ein Chrome-Bug? Mache ich etwas falsch? In der alten Version der Seite hatte ich Grafiken verwendet, da war alles glatt, aber ich wollte auf CSS wechseln und die Gradienten sind in Chrome schon ärgerlich.

Rolf