Anzeige-Fehler bei rundem border-radius

[borisbaer]

Hallo zusammen,

ich versuche vergeblich, einen Anzeige-Fehler bei zwei „überlappenden“ (oder vielleicht sollte man besser angrenzenden sagen) runden borders zu beheben. Zum einen hat das Farbverlauf-Overlay einen border-radius von 50px und zum anderen sein wrapper. Nun sieht man aber einige Pixel durch, es schließt also nicht ganz ab. Ich hoffe, man kann es auf dem Bild einigermaßen erkennen. Je nach Zoom-Stufe ist es mehr oder weniger sichtbar.

So sieht der CSS-Code dahinter aus:

.tags .wrapper {
    overflow-x: auto;
    display: flex;
    margin-left: .85rem;
    position: relative;
    border-radius: 50px;
}

.tags .wrapper::before, .tags .wrapper::after {
    transition: opacity 500ms;
    content: "";
    height: 100%;
    width: 3.5rem;
    position: absolute;
    border-radius: 0 50px 50px 0;
}

.tags .wrapper::before {
    right: 0;
    background: linear-gradient(to left, #292929 30%, transparent);
    opacity: var(--opacity tags wrapper before, 0);
}

.tags .wrapper::after {
    left: 0;
    background: linear-gradient(to right, #292929 30%, transparent);
    opacity: var(--opacity tags wrapper after, 1);
}

Gibt es irgendeinen „Trick“, um dieses Durchscheinen der Pixel zu verhinden?

Grüße
Boris

[Raketenwilli]

Das scheint der Text zu sein, der da „durchscheint”. Könnte ein Padding von 1px? (rechts/links) das lösen?

[borisbaer]

Das scheint der Text zu sein, der da „durchscheint”. Könnte ein Padding von 1px? (rechts/links) das lösen?

Genau, das ist der Text. Ein padding auf dem .tags .wrapper löst das Ganze zwar, führt aber dazu, dass der Rand etwas abgeschnitten aussieht, sobald der Farbverlauf weg ist. Siehe Bild:

[Raketenwilli]

Nun ja. Die andere Antwort wäre ein solider Border von 1px und in der äußeren Farbe. Da musst Du aber etliche andere Maße anpassen.

[borisbaer]

Nun ja. Die andere Antwort wäre ein solider Border von 1px und in der äußeren Farbe. Da musst Du aber etliche andere Maße anpassen.

Danke, ich habe es nun geschafft zu kaschieren, indem ich dem Container, in dem die Tags sind, links und rechts eine border .5px gegeben habe. Ich habe gelesen, dass das einfach ein Rendering-Bug der border-radius property ist. Man muss hier also tricksen, um das Durchscheinen von Pixeln zu verhindern.

[MudGuard]

Hi,

ich versuche vergeblich, einen Anzeige-Fehler bei zwei „überlappenden“ (oder vielleicht sollte man besser angrenzenden sagen) runden borders zu beheben.

ich weiß jetzt nicht, ob es an meinen Augen liegt, am verwendeten Monitor oder an der Kombination: Ich kann da nur mit großer Anstrengung überhaupt runde Borders entdecken - schwarz auf sehrdunkelgrau und fastgenausodunkelgrau ist für mich kaum unterscheidbar …

cu,
Andreas a/k/a MudGuard

[borisbaer]

Hallo MudGuard,

ich weiß jetzt nicht, ob es an meinen Augen liegt, am verwendeten Monitor oder an der Kombination: Ich kann da nur mit großer Anstrengung überhaupt runde Borders entdecken - schwarz auf sehrdunkelgrau und fastgenausodunkelgrau ist für mich kaum unterscheidbar …

danke für den Hinweis. Könnte am Monitor liegen. Bei mir sieht man die Farbunterschiede eigentlich deutlich. Für solche Fälle möchte ich in Zukunft aber auch noch den Light Mode aufpolieren und vielleicht noch so etwas wie einen High Contrast Mode implementieren.

Grüße
Boris

[MudGuard]

Hi,

ich weiß jetzt nicht, ob es an meinen Augen liegt, am verwendeten Monitor oder an der Kombination: Ich kann da nur mit großer Anstrengung überhaupt runde Borders entdecken - schwarz auf sehrdunkelgrau und fastgenausodunkelgrau ist für mich kaum unterscheidbar …

danke für den Hinweis. Könnte am Monitor liegen. Bei mir sieht man die Farbunterschiede eigentlich deutlich.

Dann solltest Du zusammen mit der Webseite auch gleich noch die passenden Monitore mit ausliefern.

HTTP-Monitoring, sozusagen 😉

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Könnte am Monitor liegen. Bei mir sieht man die Farbunterschiede eigentlich deutlich.

ja, es gibt teilweise erhebliche Unterschiede zwischen den Displays - auch stark abhängig von den Helligkeits- und Kontrasteinstellungen, von den Lichtverältnissen und vom Betrachtungswinkel.

Dann solltest Du zusammen mit der Webseite auch gleich noch die passenden Monitore mit ausliefern.

HTTP-Monitoring, sozusagen 😉

Soweit ich weiß, bietet HTTP derzeit noch kein geeignetes Transfer-Encoding. 🤓

Einen schönen Tag noch
 Martin

[MudGuard]

Hi,

Dann solltest Du zusammen mit der Webseite auch gleich noch die passenden Monitore mit ausliefern.

HTTP-Monitoring, sozusagen 😉

Soweit ich weiß, bietet HTTP derzeit noch kein geeignetes Transfer-Encoding. 🤓

Doch:

M essage
I ncludes
M onitor,
E xtra-Careful handling!

😉

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo Andreas,

Soweit ich weiß, bietet HTTP derzeit noch kein geeignetes Transfer-Encoding. 🤓

Doch:

M essage
I ncludes
M onitor,
E xtra-Careful handling!

der war richtig gut! 🤣

Erinnert mich an die damals kursierenden Deutungen von ISDN.

• Idiotic Self-Destructing Network
• Internet Sour-Dough Node
• Ich Seh Das Nicht

😉

Einen schönen Tag noch
 Martin