CSS merkwürdiges "Artefakt" mit border-Attribut in meisten Browsern

Versuch es mal so mit black:

Code:

.box {
border: 10px solid black;
}

Hi SEO-UX-Dude ,

Ja, auch mit dem klassischen von Dir vorgeschlagenen

Code:

'10px solid black'

ist es genau dasselbe Problem. Inzwischen habe ich das Problem einfach beiseite geschoben. Ich finde dafür keine Lösung. Auch das Zurücksetzen der Browser Einstellungen führten zu keiner Lösung.

Ich nutze jetzt wieder Firefox als Standardbrowser zur Webentwicklung. Dort geht ja alles. Warum die anderen Browser offenbar nur auf meinem System fehlerhaft darstellen, und das Problem anderen Webentwicklern unbekannt zu sein scheint (Du bist der Einzige, der je darauf geantwortet hat), entzieht sich meiner Kenntnis. Ich will mich damit auch nicht weiter aufhalten.
Es ist wie es ist, bis jemand kommt und weiß, warum das so ist.

Viele liebe Grüße und Danke
Praeludium

Hi Praeludium

Bei mir sieht das in Chrome ganz normal aus:
https://codepen.io/webgarten/pen/YzvzbOr

Mach mal ein Screenshot wie das bei dir in Chrome aussieht?

Hey SEO-UX-Dude ,

anbei findest Du einen Screenshot, den ich Dir gemacht habe, mittels CodePen. Leider ist der Screenshot aufgrund einer starken Skalierung (width: 3840px zu 1280px), welche hier für das Forum zum Posten von Screenshots vorgegeben ist, etwas verwaschen (habe es mit LoHalo Interpolation probiert).

Es ist ein Double-Screenshot. Es sind zwei Boxen, die ich mit <hr> mal ein bischen getrennt habe. Die obere Box ist leer und besitzt keine Maße. Die untere Box beinhaltet zwei Hintergründe.
Der linke Bereich des Screenshots ist Firefox, in dem keine Artefakte auftreten. Der rechte Bereich des Screenshots zeigt das Ergebnis im Chrome-Browser, stellvertretend für alle anderen Brwoser, außer Firefox.

Ich geb Dir noch mal den Directlink von CodePen mit auf den Weg. Damit Du Dir das mal "live" anschauen kannst.
https://codepen.io/Praeludium/pen/gOKbKgR

Übrigens vielen lieben Dank für Deine Hilfe

weil es hier nicht geht ^_^ ->

Code:

&#127867

Hey Praeludium

Also bei mir sehe ich die Artefakte weder in Chrome noch in Firefox noch in Safari. Ich bin aber auf Mac mit einem Retina Display. Bei diesem hochauflösenden Display hat es 2 Pixel für eine breite von 1 Pixel bei normalen Displays.

Bei Windows gibt es hochauflösende Displays, bei welchen 1.5 Pixel oder ähnliches für ein Pixel verwendet werden. Dadurch entstehen solche Artifakte wenn es nicht aufgeht.

Ich kenne mich mit Windows jetzt nicht wirklich aus, aber von solchen Problemen habe ich von Windows Nutzern schon oft gehört. Ich glaube es liegt daran. Warum es hier bei Chrome passiert ist mir auch nicht klar. Vielleicht ist bei Chrome der Rand etwas breiter oder schmaler.

Vielleicht kann ein Windows Nutzer weiterhelfen.

Hey SEO-UX-Dude,

hab es mal mit meinem Galaxy A52 - Android OS - Chrome Brwoser geöffnet. Dort ist das Artefakt nur teilweise sichtbar: In der leeren Box das Artefakt. In der Itembox kein Artefakt. Somit schon mal nicht identisch mit meinem Windows PC.
Hab von der Materie praktisch Null Ahnung. Doch mein Bauchgefühl bestätigt mir, dass es etwas mit Deinem Statement zu tun haben könnte, oder zumindest in diese Richtung geht.

Wie gesagt, bist Du der einzigste Mensch, der sich in dem Viertel Jahr je auf das Thema eingelassen hat. Das Du auf nem Mac browserübergreifend gar keine Artefakte mit dem Code erzeugen kannst, weist ja auch darauf hin, dass es offenbar systemabhängig ist, und wie Du erwähnst Windows eine ungerade Zahl -> "1.5 Pixel" verwendet.

Gleichzeitig beruhigt es mich auch. Ich muss mir also keine Sorgen machen, dass bei anderen Usern zwingend Artefakte im Design entstehen.

Vielen lieben Dank nochmal

Zitat von Praeludium

Hey SEO-UX-Dude,

hab es mal mit meinem Galaxy A52 - Android OS - Chrome Brwoser geöffnet. Dort ist das Artefakt nur teilweise sichtbar: In der leeren Box das Artefakt. In der Itembox kein Artefakt. Somit schon mal nicht identisch mit meinem Windows PC.
Hab von der Materie praktisch Null Ahnung. Doch mein Bauchgefühl bestätigt mir, dass es etwas mit Deinem Statement zu tun haben könnte, oder zumindest in diese Richtung geht.

Wie gesagt, bist Du der einzigste Mensch, der sich in dem Viertel Jahr je auf das Thema eingelassen hat. Das Du auf nem Mac browserübergreifend gar keine Artefakte mit dem Code erzeugen kannst, weist ja auch darauf hin, dass es offenbar systemabhängig ist, und wie Du erwähnst Windows eine ungerade Zahl -> "1.5 Pixel" verwendet.

Gleichzeitig beruhigt es mich auch. Ich muss mir also keine Sorgen machen, dass bei anderen Usern zwingend Artefakte im Design entstehen.

Vielen lieben Dank nochmal

Bitte bitte , ja ich würde das auch ignorieren.

Es kann sein dass es auch bei Smartphones vorkommt. Das Betriebssystem muss die Ansicht skalieren wenn der Bildschirm hochauflösend ist. Wenn es nicht genau die doppelte Dichte hat kann es dabei zu solchen Fehlern kommen. Hier steht auch noch etwas darüber:
https://learn.microsoft.com/de-de/wi...iew=windows-11