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

[marctrix]

Hej Rolf,

nach deiner Beschreibung vermute ich, dass die Browser hier mit Nachkommastellen anders umgehen. Insbesondere weil das Problem je nach Zoomstufe im Chrome auch nicht mehr besteht.

Ähnliches habe ich meiner täglichen Arbeit auch öfters beobachtet, aber leider keine Lösung dafür.

Es war mir nie wichtig genug. Oft (nicht immer) lässt es sich kaschieren/ist ohnehin nicht sichtbar, sondern nur messbar.

Wie du sagst, muss man erst einen Screenshot erstellen und dann die Grafik zoomen. Da das kein Nutzer machen wird, gehört das zu den Dingen, die ich persönlich dann einfach so lassen würde (und das sind nicht viele)…

Oder du arbeitest mit anderen Höhen/Abständen, also solchen, die durch 16 teilbar sind.

Bei einem Wert von 1.625em statt 1.6em dürftest du gute Chancen auf ein einheitliches Aussehen haben.

Das geht in dem von dir selbst gestalteten Beispiel bestimmt (bei vorgegebenen Layouts müsste man erst versuchen die Designerin zu überzeugen — viel Glück dabei!)…

Marc

[at]

Hallo marctrix.

Oder du arbeitest mit anderen Höhen/Abständen, also solchen, die durch 16 teilbar sind.

Bei einem Wert von 1.625em statt 1.6em dürftest du gute Chancen auf ein einheitliches Aussehen haben.

Das Problem ist aber doch viel grundsätzlicher: Bei Verwendung der Maßeinheit em hat man sich bereits dafür entschieden, dass die Proportionen der Elemente zueinander wichtiger sind als pixelgenaues Design. Krumme Umrechnungsfaktoren, die em auf Pixel mappen, können das allenfalls mühsam kaschieren. Wer pixelgenau gestalten will, nutzt sinnvollerweise px. Ob es sinnvoll ist, pixelgenau zu gestalten, sei dahingestellt.

MfG, at

[marctrix]

Hej at,

Oder du arbeitest mit anderen Höhen/Abständen, also solchen, die durch 16 teilbar sind.

Bei einem Wert von 1.625em statt 1.6em dürftest du gute Chancen auf ein einheitliches Aussehen haben.

Das Problem ist aber doch viel grundsätzlicher: Bei Verwendung der Maßeinheit em hat man sich bereits dafür entschieden, dass die Proportionen der Elemente zueinander wichtiger sind als pixelgenaues Design.

Keine Ahnung, ob das für andere so zutrifft. Für mich stimmt das nicht.

Aber auch du möchtest ja Proportionen zueinander korrekt wiedergegeben haben. Genau das ist in dem Beispiel hier ja nicht der Fall.

Hier wird ja ein Element (im Gegensatz zu anderen) um einen Pixel verschoben. Ansonsten soll hier wohl kein vorgegebenes Design pixelgenau umgesetzt werden.

Es ist gerade die von dir gewünschte Proportionalität, die hier nicht funktioniert.

Falls ich dich recht verstanden habe.

Wo ich mich von Pixeln verabschiede ist, wenn ich zum Layout Flexboxen oder grid mit Maßeinheiten wie fr verwende.

Und das empfinde ich als Bereicherung und Befreiung aus dem Pixelkorsett!

Marc

[at]

Hallo marctrix.

Das Problem ist aber doch viel grundsätzlicher: Bei Verwendung der Maßeinheit em hat man sich bereits dafür entschieden, dass die Proportionen der Elemente zueinander wichtiger sind als pixelgenaues Design.

Keine Ahnung, ob das für andere so zutrifft. Für mich stimmt das nicht.

Sorry, ich hatte vergessen zu ergänzen, dass sich das auf gut informierte und undogmatische Anwender bezieht. Allerdings war ich so frei, dich dieser Gruppe zuzuordnen, zu der du dich offenbar nicht zugehörig fühlst.

Aber auch du möchtest ja Proportionen zueinander korrekt wiedergegeben haben. Genau das ist in dem Beispiel hier ja nicht der Fall.

Hier wird ja ein Element (im Gegensatz zu anderen) um einen Pixel verschoben. Ansonsten soll hier wohl kein vorgegebenes Design pixelgenau umgesetzt werden.

Wenn es auf einen Pixel ankommt, soll es pixelgenau sein. Die Proportionen ändern sich bei einer Differenz von 0,025 em um ein Vierundsechzigstel, also als Proportion nicht sichtbar. Und im konkreten Fall geht es nicht einmal um dieses Vierundsechzigstel als Maß, sondern vielmehr um das Erreichen eines Schwellenwertes, eben eines Pixels.

MfG, at

[marctrix]

Hej at,

Das Problem ist aber doch viel grundsätzlicher: Bei Verwendung der Maßeinheit em hat man sich bereits dafür entschieden, dass die Proportionen der Elemente zueinander wichtiger sind als pixelgenaues Design.

Keine Ahnung, ob das für andere so zutrifft. Für mich stimmt das nicht.

Sorry, ich hatte vergessen zu ergänzen, dass sich das auf gut informierte und undogmatische Anwender bezieht. Allerdings war ich so frei, dich dieser Gruppe zuzuordnen, zu der du dich offenbar nicht zugehörig fühlst.

Wenn ich für etwas Maße angebe, möchte ich natürlich Größen festlegen.

Dass ich mich für em entscheide, hat etwas mit meiner Überzeugung zu tun, dass Nutzer Webseiten an ihre Bedürfnisse anpassen können müssen, damit die Seiten für jeden funktionieren.

Und selbstverständlich mache ich das, damit die Proportionen dabei gewahrt bleiben. Und natürlich ist mir das wichtiger, als die Beibehaltung der Pixelabmessungen. Das heißt aber nicht, dass ich die Design-Vorgaben gar nicht erst umsetze.

Das gehört nicht einmal zu Dingen, über die ich zu entscheiden habe.

Was ich davon halte, wie sehr ich (über welche Dinge eigentlich) informiert bin und ob meine Einstellung (welche eigentlich) dogmatisch ist, spielt in meinem Arbeitsalltag kaum eine Rolle.

Kann sein, dass das auf deinem Ross da oben anders ist, Don Quixote…

Aber auch du möchtest ja Proportionen zueinander korrekt wiedergegeben haben. Genau das ist in dem Beispiel hier ja nicht der Fall.

Hier wird ja ein Element (im Gegensatz zu anderen) um einen Pixel verschoben. Ansonsten soll hier wohl kein vorgegebenes Design pixelgenau umgesetzt werden.

Wenn es auf einen Pixel ankommt, soll es pixelgenau sein. Die Proportionen ändern sich bei einer Differenz von 0,025 em um ein Vierundsechzigstel, also als Proportion nicht sichtbar.

Was sagte ich für den Fall, dass es nicht sichtbar ist?

Und im konkreten Fall geht es nicht einmal um dieses Vierundsechzigstel als Maß, sondern vielmehr um das Erreichen eines Schwellenwertes, eben eines Pixels.

Wenn der sichtbar ist, kann es stören. Zum Beispiel wenn eine Linie zwei Pixel dick ist, eine andere daneben nur einen Pixel. Dann ist das ärgerlich.

Auch wenn irgendwo etwas einen Pixel weit übersteht, statt bündig abzuschließen.

Was spricht eigentlich gegen meinen Lösungsvorschlag, wenn es denn hilft?

Was stört dich da dran, wenn das Problem von @Rolf B dadurch gelöst wäre?

Marc

[at]

Hallo marctrix,

Was spricht eigentlich gegen meinen Lösungsvorschlag, wenn es denn hilft?

Daran stört mich, dass er nur dann hilft, wenn du den Grund ignorierst, den du für die Verwendung von em angibst. Denn bei einer Veränderung der Schriftgröße ändert sich der Umrechnungsfaktor zum Erreichen des Schwellenwertes und du hättest besser von vornherein mit px gearbeitet.

MfG, at

[marctrix]

Hej at,

Was spricht eigentlich gegen meinen Lösungsvorschlag, wenn es denn hilft?

Daran stört mich, dass er nur dann hilft, wenn du den Grund ignorierst, den du für die Verwendung von em angibst. Denn bei einer Veränderung der Schriftgröße ändert sich der Umrechnungsfaktor zum Erreichen des Schwellenwertes und du hättest besser von vornherein mit px gearbeitet.

Den Grund ignoriere ich keineswegs. Wenn man vorgegebenen Größen, die man umzusetzen hat, ob man will oder nicht, in em (besser rem) angibt, kann man beides haben: ein Layout, das in einem definierten Zustand (Schriftgröße und Zommfaktor 100%) aussieht wie gefordert und trotzdem dem Nutzer die beliebig zu vergrößern und zu verkleinern.

Kannst du gerne ablehnen, bei mir bekommt man das wenn es gewünscht (und bezahlt) wird.

Es kommt zwar generell immer weniger auf einzelne Pixel an, aber in manchen Fällen eben doch. Wenn Icons etwas tiefer sitzen als die Grundlinie der Schrift, wenn eine Linie doppelt so dick ist wie gewünscht oder wenn etwas um nur einen Pixel über eine Linie hinaus ragt, wird das generell als störend empfunden und üblicherweise bemängelt.

Auch meiner Meinung nach sind das Dinge die behoben werden sollten.

Marc

[Christian Kruse]

Hallo marctrix,

Wenn man vorgegebenen Größen, die man umzusetzen hat, ob man will oder nicht, in em (besser rem) angibt, […]

Vorsicht bei der Verwendung von rem. Die Umsetzung ist - zumindest im Safari - noch buggy.

LG,
CK

[marctrix]

Hej Christian,

Wenn man vorgegebenen Größen, die man umzusetzen hat, ob man will oder nicht, in em (besser rem) angibt, […]

Vorsicht bei der Verwendung von rem. Die Umsetzung ist - zumindest im Safari - noch buggy.

Danke!

Marc

[at]

Hallo marctrix,

immer diese bösen Auftraggeber. Halten einen immer von sinnvollen Vorgehnsweisen ab.

MfG, at

[Christian Kruse]

Hallo at,

immer diese bösen Auftraggeber. Halten einen immer von sinnvollen Vorgehnsweisen ab.

Klingt nach einem Fall von Kunden aus der Hölle 😉

LG,
CK

[marctrix]

Hej Christian,

immer diese bösen Auftraggeber. Halten einen immer von sinnvollen Vorgehnsweisen ab.

Klingt nach einem Fall von Kunden aus der Hölle 😉

Nein, so schlimm ist das nicht.

Ich verstehe das nicht: ich arbeite mit diversen Designern und Agenturen zusammen, auch Vorträgen von anderen frontendern, selbst auf beyond Tellerrand und ähnlichem Kaliber höre ich immer wieder, dass selbst die bekanntesten aus meiner Sparte immer wieder solche Probleme lösen müssen und das so lästig wie mühsam finden wie ich und wie toll es doch ist, dass flex-items nun alle gleich hoch sind (zum Beispiel label, select, input und Absenden-Button in einer Reihe).

Nicht nur dass das jeder Auftraggeber inakzeptabel findet, wenn diese Elemente nicht oben und unten bündig zueinander sind: das sieht doch wirklich übel aus, wenn die unterschiedlich hoch sind.

Bei @Christian Kruse kann ich verstehen, wenn er sich nicht drum kümmern mag, muss er auch nicht als Programmierer, bei @at weiß ich nicht, ob das zu seinen Aufgaben gehört. Aber Frontender machen genau das.

Marc

[Christian Kruse]

Hallo marctrix,

immer diese bösen Auftraggeber. Halten einen immer von sinnvollen Vorgehnsweisen ab.

Klingt nach einem Fall von Kunden aus der Hölle 😉

Nein, so schlimm ist das nicht.

Ach, ich habe nur geblödelt und die Gelegenheit ergreifen wollen, diese Seite nochmal zu verlinken 😀

LG,
CK

[Gunnar Bittersmann]

@@Christian Kruse

Ach, ich habe nur geblödelt und die Gelegenheit ergreifen wollen, diese Seite nochmal zu verlinken 😀

Backender aus der Hölle. 😈

LLAP 🖖

[Tabellenkalk]

Hallo,

Backender

Eigentlich sagt man Bäcker dazu!

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Backender

Eigentlich sagt man Bäcker dazu!

Ach, und ein Frontender wäre dann ein Konditor?

LLAP 🖖

[Tabellenkalk]

Hallo,

@@Tabellenkalk

Backender

Eigentlich sagt man Bäcker dazu!

Ach, und ein Frontender wäre dann ein Konditor?

ich wäre im Analogieschluss auf Frönter gekommen…

Gruß
Kalk

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Ach, und ein Frontender wäre dann ein Konditor?

Nein, ein Fron-Tender ist jemand, der Frondienste anbietet.

Bis demnächst
Matthias

[marctrix]

Hej at,

immer diese bösen Auftraggeber. Halten einen immer von sinnvollen Vorgehnsweisen ab.

Nein. Das verschieben eines Icons um x Pixel ist für das Konzept ohne Belang.

Unter Vorgehsweise verstehe ich aber genau das: ein Konzept, eine Methode, eine Idee. Icon drei Pixel nach rechts kommt vollkommen ohne Philosophie aus. 😉 Des Menschen Wille ist sein Himmelreich. Und wenn ein Icon nach unten aus der Geundlinie raushängt, ist das einfach unästhetisch.

Gefällt mir selber nicht.

Wenn es eine methodische Lösung gibt, schlage ich die übrigens vor (Icons so erstellen, dass die auf der Grundlinie sitzen).

Irgendwie werde ich das Gefühl nicht los, du bestehst darauf mich falsch zu verstehen.

Warum nur?

Marc

[beatovich]

hallo

Wenn man vorgegebenen Größen, die man umzusetzen hat, ob man will oder nicht,

Bekomme ich dann auch die Grafikkarte vom Siteadmin geliefert?

[marctrix]

Hej at,

vielleicht reden wir einfach ein wenig aneinander vorbei, weil wir unter pixelgenauem Design etwas anderes verstehen.

Ich bezeichne damit eine Website, in der jeder Kasten, jedes Icon, jeder Abstand exakt (auf den Pixel genau) den gemachten Vorgaben entspricht.

Das mache ich seit Jahren nicht mehr, obwohl bestimmte Dinge leider noch oft gefordert werden (das Link-Icon soll genau drölf Pixel von der senkrechten Linie des „B“ entfernt sein!?! — What the… Nutzer können andere Schriftarten verwenden, eine andere aus der angegebenen Liste angezeigt bekommen (weil dafür ist die Liste ja da!), zoomen usw… — Das ist unnötig aufwändig und dadurch teuer? Egal wir wollen das so oder können Sie das etwa nicht! Das machen doch alle so!

Vielleicht sind dir solche Gespräche fremd aber egal. Ich brauche das nicht, muss das aber dennoch bisweilen machen.

Aber selbst die Forderung hier und da ein einzelnes Icon auf den Pixel genau ausrichten zu sollen, ist IMHO noch kein pixelgenaues Design.

Bei der Verwendung von Flexbox und Grid baue ich übrigens darauf, dass ich pixelgenau ausrichten kann, so dass bei aneinander stoßenden Boxen, keine Stufen o.ä. zu sehen sind.

Und das hat mit pixelgenau gar nichts mehr zu tun. Wie breit die Kästen, wie groß der Abstand zwischen ihnen: interessiert mich alles nicht. Darum soll sich der Browser kümmern. Hauptsache die Kanten der unterschiedlichen Elemente sind bündig zueinander.

Und das klappt hervorragend!

Offtopic:

Klar kann ich mir vorstellen, dass man aus künstlerischen Gründen aus so einem Raster ausbrechen möchte. Cool!

Aber wann bekommt man schon mal die Chance kreativ sein zu dürfen?

Webseiten sind nicht der Ort, um seine Kreativität auszuleben (auch wenn eine ganze Branche, von sich selbst behauptet „kreativ“ zu sein, muss das nichts heißen. Die Kreativität beschränkt sich allzuoft auf das zusammenstellen der immer gleichen Framework-Boxen mit unterschiedlichen Farben).

Marc

[Henry]

Hallo marctrix,

vielleicht reden wir einfach ein wenig aneinander vorbei, weil wir unter pixelgenauem Design etwas anderes verstehen.

Wahrscheinlich, denn so etwas gibt es, wie du auch nachfolgend richtig begründest, gar nicht. Das ist ein Märchen an dem Designer glauben(wollen), die kein technisches Verständnis haben und denken deren Entwurf müsste immer und überall gleich aussehen, 1:1 wie in deren Photoshop, InDesign, whatever.

@admins
Ich hatte jetzt schon eine Menge mehr dazu geschrieben und Beispiele rausgesucht aber leider hat ein andere Tab, den Browser zum Neustart gezwungen, so dass wieder mal alles weg war. Habe jetzt auch keine Lust mehr noch mal von vorne anzufangen, aber eine Frage:

Ich kann doch hier einiges personalisieren (sogar eigene Scripte laufen lassen?) Mein Gedankengang wäre jetzt, um dem Problem mal endlich Herr zu werden, per Inputeventhandler eine Zwischenspeicherung im Local Storage zu erzeugen. Bevor ich das nun angehe(und viell, unnötigen Aufwand betreibe) mal kurz nachgefragt ob das sinnvoll/möglich wäre, oder es bessere Vorschläge dazu gibt?

Gruss
Henry

[beatovich]

hallo

Hallo marctrix,

vielleicht reden wir einfach ein wenig aneinander vorbei, weil wir unter pixelgenauem Design etwas anderes verstehen.

Wahrscheinlich, denn so etwas gibt es, wie du auch nachfolgend richtig begründest, gar nicht. Das ist ein Märchen an dem Designer glauben(wollen), die kein technisches Verständnis haben und denken deren Entwurf müsste immer und überall gleich aussehen, 1:1 wie in deren Photoshop, InDesign, whatever.

Ach, wenige Designer haben so was je geglaubt. Das seltsame ist jedoch dass die canvas-fingerprinter daran glauben.

[Henry]

Hallo beatovich,

Ach, wenige Designer haben so was je geglaubt.

Wäre dem so hätte ich mir viele Diskussionen und Aufklärungen ersparen können.

Das seltsame ist jedoch dass die canvas-fingerprinter daran glauben.

Was kein Widerspruch ist, sondern sogar eine Bestätigung. Denn darum geht's ja, das Ursprungsdesign anhand der Userindividualisierung, und damit der Abweichung vom Ursprungsdesign, den User zu identifizieren.

Gruss
Henry

[beatovich]

hallo

Das seltsame ist jedoch dass die canvas-fingerprinter daran glauben.

Was kein Widerspruch ist, sondern sogar eine Bestätigung. Denn darum geht's ja, das Ursprungsdesign anhand der Userindividualisierung, und damit der Abweichung vom Ursprungsdesign, den User zu identifizieren.

Fingerprinting funktioniert um so besser, je weniger Daten verwendet werden. Beim Fingerprinting geht's auch darum, dass User wiedererkannt werden können.

[at]

Hallo marctrix,

vielleicht reden wir einfach ein wenig aneinander vorbei, weil wir unter pixelgenauem Design etwas anderes verstehen.

Womöglich.

Ich bezeichne damit eine Website, in der jeder Kasten, jedes Icon, jeder Abstand exakt (auf den Pixel genau) den gemachten Vorgaben entspricht.

Ich habe mich auf das Ausgangsproblem bezogen, für das ja auch dein Lösungsansatz gelten sollte. Einen px-Wert unter Annahme eines bestimmten Umrechnungsfaktors in em umzurechnen, statt ihn in px zu schreiben, ist pixelgenaues Design unter Verwendung einer dafür bestenfalls mäßig geeigneten Maßeinheit. Das gilt im gezeigten Code-Schnipsel wie in einem ganzen HTML-Dokument oder auf einer gesamten Website.

Webseiten sind nicht der Ort, um seine Kreativität auszuleben (auch wenn eine ganze Branche, von sich selbst behauptet „kreativ“ zu sein, muss das nichts heißen. Die Kreativität beschränkt sich allzuoft auf das zusammenstellen der immer gleichen Framework-Boxen mit unterschiedlichen Farben).

Gutes Design bedeutet, sinnvolle Regeln an wenigen Punkten gezielt zu brechen, ohne den Nutzer vor unlösbare Rätsel zu stellen. Das setzt Kreativität voraus und ihr gleichzeitig Grenzen.

MfG, at