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

7Antworten
  1. #1
    Avatar von Praeludium
    Praeludium ist offline
    Themen Starter

    Title
    Benutzer
    seit
    11.08.2022
    Beiträge
    4

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

    Liebe Gemeinschaft,

    folgendes Problem habe ich:

    In CSS möchte ich einen Rand um einen HTML Container ziehen.

    HTML:
    Code:
    <div class="box"></div>
    In CSS dann:

    Code:
    .box {
    border: 10px solid;
    }
    Dieser Rand einer Box wird in Firefox dargestellt, wie es sein soll: (Ein 20 Pixel breiter Balken, bzw. geschlossene Box.).

    Jedoch: In Chrome, Edge, Opera oder Vivaldi entsteht eine Art "Artefakt":
    Eine weiße Linie durchzieht den Balken/geschlossene Box. Sie hat in etwas die Dicke eines halben Pixels. Ziehe ich die Box auf eine Größe von beispielsweise 300 Pixel und platziere darin farbige Flächen ist diese "weiße Linie" oben und links, jedoch nicht rchts und unten zu sehen. Hier schließen sich die Farbflächen nahtlos an den Rand der Box an.

    Ich bin Anfänger und verstehe nicht, warum Firefox alles richtig darstellt und die anderen Browser eben nicht. Bei anderen Systemen in einem Tutorial beispielsweise sind in einem der besagten Broswer dieses Artefakt nicht zu sehen (Chrome).

    Könnt ihr mir weiter helfen? Das wäre wirklich klasse! Ich habe niemanden, den ich sonst fragen könnte...

    Grüße
    Prealudium

  2. #2
    Avatar von SEO-UX-Dude
    SEO-UX-Dude ist offline

    Title
    Benutzer
    seit
    25.10.2022
    Beiträge
    8

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

    Versuch es mal so mit black:

    Code:
    .box {
    border: 10px solid black;
    }

  3. #3
    Avatar von Praeludium
    Praeludium ist offline
    Themen Starter

    Title
    Benutzer
    seit
    11.08.2022
    Beiträge
    4

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

    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

  4. #4
    Avatar von SEO-UX-Dude
    SEO-UX-Dude ist offline

    Title
    Benutzer
    seit
    25.10.2022
    Beiträge
    8

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

    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?

  5. #5
    Avatar von Praeludium
    Praeludium ist offline
    Themen Starter

    Title
    Benutzer
    seit
    11.08.2022
    Beiträge
    4

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

    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
    Miniaturansichten angehängter Grafiken Miniaturansichten angehängter Grafiken Klicke auf die Grafik für eine größere Ansicht 
Name:Artefact_Check.jpg 
Hits:3 
Größe:78,7 KB 
ID:3873  


  6. #6
    Avatar von SEO-UX-Dude
    SEO-UX-Dude ist offline

    Title
    Benutzer
    seit
    25.10.2022
    Beiträge
    8

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

    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.

  7. #7
    Avatar von Praeludium
    Praeludium ist offline
    Themen Starter

    Title
    Benutzer
    seit
    11.08.2022
    Beiträge
    4

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

    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

  8. #8
    Avatar von SEO-UX-Dude
    SEO-UX-Dude ist offline

    Title
    Benutzer
    seit
    25.10.2022
    Beiträge
    8

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

    Zitat 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

Ähnliche Themen

  1. Antworten: 11
    Letzter Beitrag: 13.04.2014, 18:18
  2. Antworten: 1
    Letzter Beitrag: 27.07.2013, 14:15
  3. "Scythe Samurai ZZ" auf das mainboard "p5qd turbo"

    Von suschi103 im Forum sonstige Hardware
    Antworten: 0
    Letzter Beitrag: 03.07.2010, 12:45
  4. Wie mache ich aus "Benutzer" (Ordner) "Users" ?

    Von Hiob im Forum Windows Vista
    Antworten: 5
    Letzter Beitrag: 29.06.2008, 20:37
Diese Seite benutzt Cookies Durch die weitere Nutzung der Seite stimmen Sie der Verwendung von Cookies zu. Infos zum Datenschutz