Redactor, HiDPI-Bildschirme und Smileys

Cadeyrn · September 23, 2016 at 4:16 PM

Mit HiDPI-Bildschirm sind im Editor immer wieder mal die Smileys total verschwommen. Es scheint, als würden die Smileys für normale Auflösungen geladen werden. Das passiert aber nicht immer, oft passt es auch. Aber das ist mir in den letzten Tagen (Wochen?) schon mindestens zehn Mal untergekommen, vermutlich öfter, ich hab das nicht mit gezählt.

Der Screenshot (hatte das ursprünglich als PS formuliert und mich nun doch für ein eigenes Thema entschieden) zeigt den Unterschied zu den Smileys unten in der Auswahl sehr deutlich, oben unscharf, unten scharf. Nach dem Absenden des Beitrags und Klick auf Bearbeiten, waren die Smileys auch wieder scharf.

Scamander · September 23, 2016 at 4:20 PM

Habe ich mobil mit iOS 10 auch. Unten in der Liste werden sie korrekt angezeigt, füge ich sie ein, sind zu unscharf. Beim endgültigen (abgeschickten) Beitrag dann wieder scharf.

**Alexander Ebert** · September 23, 2016 at 4:24 PM Official Post

Die Smilies arbeiten mit srcset zur Anzeige der HD-Version, möglicherweise geht das Attribut beim Einfügen verloren, ich muss mal nachschauen

Scamander · September 23, 2016 at 4:28 PM

Sehe grad, wenn ich einen einfüge (schwammig) und in den HTML-Modus vom Editor und zurück wechsle, ist er scharf. Evtl hilft das noch.

**Alexander Ebert** · September 23, 2016 at 5:27 PM Official Post

Es scheint sich dabei um Browser-Bugs zu handeln, denn das srcset steht korrekt im DOM drin, wird aber ignoriert. Ich konnte das Problem beheben in dem ich das Element mit sich selbst überschreiben lasse [1], dadurch wird es erneut ausgewertet und plötzlich wird srcset erkannt.

[1] https://github.com/WoltLab/WCF/co…3072e4a31d0eR27

Cadeyrn · September 27, 2016 at 10:35 AM

Ist der Fix hier schon installiert? Denn sowohl gestern als auch gerade wieder hatte ich das Problem erneut.

Cadeyrn · October 13, 2016 at 3:48 PM

WoltLab Ich wiederhole meine Frage, da es schon wieder aufgetreten ist und hier ja mittlerweile die Beta 2 installiert ist.

**Alexander Ebert** · October 13, 2016 at 4:09 PM Official Post

Quote from Cadeyrn

WoltLab Ich wiederhole meine Frage, da es schon wieder aufgetreten ist und hier ja mittlerweile die Beta 2 installiert ist.

Kann ich so nicht nachstellen, v.a. da nur mit cloneNode() gearbeitet wird um den Smiley einzufügen. Ich kann mir höchsten vorstellen, dass Firefox dort Attribute verschluckt, denn beim Klick wird eine simple Kopie der dargestellten Smilies eingefügt. Per Definition sollte der Smiley im Editor dann identisch zum Smiley sein.

Hast du irgendein Muster bemerkt, etwa das es nur beim Bearbeiten eines Beitrags auftritt oder ist es generell nur sporadisch der Fall? Wenn möglich kannst du mit den Developer Tools einen Blick auf den eingefügten Smiley werden, dieser sollte über das srcset-Attribut verfügen in dem die Grafik für 2x angegeben ist.

Cadeyrn · October 13, 2016 at 4:15 PM

Leider nur sporadisch und vom Gefühl her auch nicht mehr so häufig seit dem Bugfix. Auf jeden Fall war es sowohl beim letzten Mal als auch vorhin beim Bearbeiten eines Beitrags. Sobald es wieder auftritt, werde ich mal schauen. Kann aber dauern, bis es wieder auftritt.

**Alexander Ebert** · October 13, 2016 at 4:41 PM Official Post

Quote from Cadeyrn

Sobald es wieder auftritt, werde ich mal schauen.

Sehr gut, wenn möglich vergleiche es direkt mit dem Markup vom Smiley im Tab. Je nachdem welche Diskrepanz dort auftritt, kann ich die möglichen Ursachen eingrenzen und im Zweifel auch einen Fix bauen ohne es reproduzieren zu können. Bei den Smilies habe ich den Vorteil, dass ich exakt weiß wie es aussehen muss und dementsprechend kann ich da auch mit der Brechstange rangehen - ich muss nur wissen was nicht passt.

Cadeyrn · October 22, 2016 at 4:30 PM

Gerade wieder auftetreten. Das srcset-Attribut hat gefehlt.

Code

<img src="https://beta.woltlab.com/images/smilies/emojione/1f609.png" class="smiley" alt=";)" height="23">

**Alexander Ebert** · October 22, 2016 at 4:57 PM Official Post

Quote from Cadeyrn

Gerade wieder auftetreten. Das srcset-Attribut hat gefehlt.

Um Missverständnisse zu vermeiden: Der Smiley wurde per Klick auf die Grafik im Smiley-Tab eingefügt, korrekt?

Cadeyrn · October 22, 2016 at 5:13 PM

Nein, ich habe einen bestehenden Beitrag bearbeitet. Beim nächsten Öffnen der Bearbeiten-Ansicht hat es wieder gepasst.

Cadeyrn · October 22, 2016 at 5:42 PM

Dein Beitrag hat mich auf eine Idee gebracht.

Füge ich den Smiley per Smiley-Tab ein und speichere, wird beim nächsten Bearbeiten der Smiley scharf angezeigt.

Benutze ich den Smiley-Tab nicht, sondern gebe den Smiley-Code per Tastatur ein, ist der Smiley beim nächsten Bearbeiten unscharf.

Aber sobald ich den Beitrag bearbeite und speichere, ist er beim darauffolgenden Bearbeiten in beiden Fällen scharf.

Passiert da etwas hinter den Kulissen beim Bearbeiten eines Beitrags, was nicht beim Erstellen neuer Beiträge passiert?

**Alexander Ebert** · October 22, 2016 at 6:02 PM Official Post

Quote from Cadeyrn

Dein Beitrag hat mich auf eine Idee gebracht.

Und deiner hat mich auf eine Idee und des Rätsels Lösung gebracht

**Alexander Ebert** · October 22, 2016 at 6:28 PM Official Post

https://github.com/WoltLab/WCF/co…51e2fa1194d507e

Zur Erläuterung: Bei der Ausgabe werden alle eingebeteten Smilies geparsed und bei Bedarf angepasst, denn diese stehen als <img>-Element direkt in der Datenbank und sind somit statisch. Um nun zu gewährleisten, dass Smilies immer aktuell sind und den Einstellungen im ACP entsprechen, werden sie vor der Ausgabe auf diesen Stand gebracht. Selbiges passiert im übrigen auch beim Speichern, das ist u.a. notwendig um zu verhindern, dass jemand <img class="smiley"> missbraucht um ein Bild einzufügen, obwohl derjenige keine Berechtigungen dazu hat.

Beim Bearbeiten des Beitrags wird dem Editor der Original-Code aus der Datenbank zur Verfügung gestellt und dieser entspricht nicht zwangsläufig 1:1 dem HTML in der Ausgabe. Das ist grundsätzlich auch vollkommen in Ordnung, da bestimmte Elemente (z.B. Zitate) im Editor vereinfacht dargestellt werden. Das bedeutet aber auch, dass der Smiley in genau der Form angezeigt wird, wie es das HTML aus der Datenbank vorgibt.

Die automatische Erkennung der Smilies arbeitet als letztes, d.h. zu diesem Zeitpunkt wurden alle anderen Elemente - einschließlich der Bilder - bereits verarbeitet. Die Umwandlung basierte aber auf einem veralteten Stand, denn bei dieser fehlten die Informationen für die HD-Versionen der Smilies. Allerdings fiel dies nie groß auf, da ich (a) annahm du würdest die Smilies per Klick einfügen und (b) bei der Ausgabe alles in Ordnung ist.

Hmm, jetzt musste ich doch etwas weiter ausholen als ich initial angenommen habe. Ich Danke dir jedenfalls für deine Mithilfe, erst durch deine Rückmeldung ist mir überhaupt klar geworden, an welcher Stelle der Fehler zu suchen ist!

Participate now!