Unscharfe Schrift nach dem einbinden eines Videos

[Dee]

Tach zusammen

Habe auf der Website ein Clip eingebunden. Nun wird die Schrift sowie auch auch die Border etwas verschwommen dargestellt. Das in allen Browsern.
Es spielt dabei auch keine Rolle ob ich den Clip mit dem Video/Audio-, HTML 5 Film/Tondatei- oder ein Youtbe- Inhaltselement einbinde. Nehme ich es raus und platziere da ein Bild sieht alles wieder wunderbar aus.

Hatte vielleicht wer von euch dieses Problem auch schon Mal oder hat wer einen Tipp?

Edit: Die Schriften habe ich direkt eingebunden, habe es aber auch mit Google-Webfonts versucht mit gleichem Resultat.

[tab]

Na dann wird es wohl am Clip liegen. Entweder ist der von vornherein schon unscharf oder er wird nicht in Originalgröße eingebunden und z.B. hochskaliert. Gibt es vielleicht eine URL, wo man sich das mal anschauen kann?

[Dee]

Danke tab

Die Clips werden eigentlich scharf angezeigt, nur die Schrift im anschliessenden Content leider nicht.

Gerne auch einen Link zur Seite

Wenn du den Browser zusammenfaltest, wird anstelle des Videos dann ein Bild angezeigt. Bei hin und her schieben sieht man den Unterschied dann auch sehr gut.

[Samson1964]

Er schreibt aber das alles unscharf wird was nicht zum Video gehört.....

Gibt es einen Link?

Gesendet von meinem L52 mit Tapatalk

[tab]

Ich brauche wohl eine neue Lesebrille, sehe keinen Unterschied.

[Znrl]

Ich sehe genau dann eine Unschäre, wenn ich in den Textblöcken unterhalb des Videos die "Mehr erfahren" Buttons mit der Maus überfahre.
Das lässt sich durch deaktivieren der Transitions "beheben".

[tab]

Ja, ok, beim Überfahren der Buttons sehe ich es auch. Kann ich mir die neue Brille sparen
Edit: Allerdings macht es bei mir keinen Unterschied ob oben der Clip oder das Bild angezeigt wird. Wird beide Male unscharf.

[Dee]

Danke für eure Rückmeldungen. Ist eigentlich kein schlechtes Zeichen, wenn das bei euch nicht zu sehen ist.

Bei mir ist der Unterschied aber ziemlich gut zu sehen. Habe das auf PC wie auch auf dem Mac.

Hier mal Ein Screen wie das ausschaut:

screen.png

Könnte mir schon vorstellen, dass es Clientseitig ist, dass es aber auf PC und Mac zu sehen ist

Edit: Auch die Schrift wird etwas dicker dargestellt.
Edit: Habe es auch ohne Transitions versucht - leider keine Veränderung.

[Samson1964]

Wird bei mir auch unscharf, sobald die Transition den grafischen Pfeil von 90 auf 98% verschiebt und umgekehrt. Vielleicht sind Deine Selektoren zu gierig und verschieben den ganzen Rest von mod_article auch?!

[Samson1964]

Nimmt man das rotate-Transform bei den anderen Elementen raus, ist der Unschärfe-Effekt noch da, aber kaum zu bemerken: https://codepen.io/Samson1964/pen/NaqeOo

[Znrl]

Also im Edge kann ich das halbwegs nachvollziehen, dort ist solange das Video im Bild ist der rest unscharf, sobald man weit genug runter scrollt wird alles wieder scharf.
Dort hat das "hovern" der Buttons keinen Einfluss darauf. (Zuerst hatte ich das im Firefox angeschaut.)

Aber auch hier ist immer alles scharf ohne die transitions.
Ich frage mich jetzt auch ob es nötig ist alles zu drehen und dann wieder zurückzudrehen, nur für die abgeschrägten Übergänge. Ich nehme an das hat was mit dem zu tun wie die Browser das rendern und gedrehte Schrift ist oft problematisch, auch in Grafik Programmen etc. vtl. gibts ja aber auch ne Lösung dafür.
Abgeschrägte Übergänge lassen sich sonst ja auch anders erzeugen.

[Dee]

Besten Dank für eure Inputs und das ihr euch die Zeit genommen habt um mir zu helfen. Es hat mir sehr weitergeholfen!
Ich habe das nun quer Beet durchgetestet und es ist wohl so, dass es tatsächlich mit dem "transform: rotate" zusammenhängt.

Leider sehe ich keine andere Möglichkeit die diagonalen Kanten anders darzustellen.

Layout mit Kanten

Muss mir wohl überlegen ob das Design generell angepasst wird oder ob ich einfach die Videos entferne.

Thanks a lot