Neu JTL PayPal Checkout fehlerhafte Darstellung im Firefox

[jensderdritte]

Mir ist heute aufgefallen, dass im Firefox 106.0.1 die Darstellung der Zahlarten im PayPal Checkout falsch ist.
Die Beschreibungstexte rutschen unter die Zahlarten Icons, siehe Screenshot.
Ist ein modifiziertes NovaChild Template (Im originalen Template aber der gleiche Fehler), Shop 5.12, PayPal Checkout 1.0.5.

Allerdings nur beim ersten Aufruf:
Wenn man nun einen Reload durchführt, oder die Seite andersweitig neu aufruft, sieht alles korrekt aus.
Erst nach dem Neustart des Browsers kommt es dann wieder zu diesem Fehler, dieser ist aber immer exakt nachvollziehbar.
Bei IE und Chrome kommt es nicht zu diesem Fehler.

Kann das jemand nachvollziehen?
Gibt es einen Fix dafür?

 

[John]

Hast Du mal probiert, nur das CSS auf der problematischen Seite neu zu laden? Dafür gibts z.B. eine FireFox Plugin. Könnte mir gut vorstelle, daß das Problem in diese Richtung geht...

 

[jensderdritte]

Moin,
Gerade mal mit dem CSS-Reloader getestet: Fehler bleibt.
Erst beim kompletten Reload sieht es richtig aus.

 

[John]

Jo, habe ich auch. In zwei unterschiedlichen Shops (Version 5.1.5) getestet. Mach doch mal ein Ticket auf...

 

[jensderdritte]

Ticket#2022102510002828

 

[jensderdritte]

Support kann den Fehler nicht nachvollziehen, Ticket wurde geschlossen.

 

[JohnFrea]

...da würde ich nachfassen. Das Problem besteht definitiv, wenn FireFox mit leerem Cache erstmalig auf PayPal Checkout trifft. Bei uns 1:1 genauso.

 

[jensderdritte]

Ich habe JTL noch mal drauf hingewiesen, dass ich nicht der Einzige mit dem Problem bin.
Wen jemand den Fehler auch noch nachvollziehen kann (oder auch nicht), kann er oder sie das eventuell kurz in diesen Thread schreiben.

 

[John]

Gibts einen Referenzshop von JTL mit PayPal? Könnte man ja auch direkt an dem nachvollziehen...

 

[ergowebshop]

Wir haben Shop 5.1.4, Checkout auch 1.0.5, allerdings mit einem modifizierten FireChild Template, da funktioniert es aber.
Getestet mit einem alten Firefox 83 und auf einem anderen System mit extra dafür neu installiertem Firefox 107 geht es auch.

Jens, John, könnt ihr mal bei euch gucken mit Rechtsklick auf die Zahlungsart und "Element untersuchen"?
Bei uns haben die Bilder einen style der die Breite setzen sollte, festgesetzt also ich meine nicht über CSS angepasst. Deswegen hat der Support wohl nichts gefunden. (siehe Bild 1)

Im Plugin Verzeichnis in frontent\css\template setzt die paymentButtons.tpl die Breite per jQuery auf "widestWidth".
Hierbei geht es alle angeschalteten (und für den aktuellen Kunden verfügbaren) Zahlungsarten durch und prüft von jeder davon ob ein Bild drin ist und merkt sich die Breite.
Also long story short: alle DIVs um alle Bilder werden auf die Breite des breitesten Bildes gesetzt, das sorgt für den gewünschten Tabelleneffekt. Sollte also funktionieren.

Habt ihr in den regulären Zahlungsarten (z.B. Vorkasse) eigene Bilder festgelegt? Dann nehmt mal zum Test die Bild URLs raus und guckt ob es dann geht. (siehe Bild 2)

 

[jensderdritte]

Vielen Dank schon mal für deine Mühe, ich freue mich, dass das Problem doch noch jemanden interessiert 😉

Habt ihr in den regulären Zahlungsarten (z.B. Vorkasse) eigene Bilder festgelegt? Dann nehmt mal zum Test die Bild URLs raus und guckt ob es dann geht. (siehe Bild 2)

Ich habe mal alle anderen Zahlarten ausgeschaltet, Fehler bleibt.
Eine Breite wird im NOVA Template nicht festgelegt, nur margin.
Im Anhang habe ich mal ein paar Screenshots von den diversen DIVs gemacht, hilft das evtl weiter?

 

[ergowebshop]

Hab ich auch so, display inline-block und ein bisschen padding, margin, valign...

Wenn ich die Breite über die dev tools ausschalte, funktioniert es trotzdem ohne zu überlagern, dann ist der Text direkt neben den Bildern.

In deinem 3. Bild, scroll mal rechts unten ein Stück weiter bei berechneten Styles, das Einzige wie ich das Verhalten provozieren konnte war, wenn der Text ein position:absolute hat.

 

[jensderdritte]

In deinem 3. Bild, scroll mal rechts unten ein Stück weiter bei berechneten Styles

Siehe Anhang, viel steht aber nicht drin...

 

[ergowebshop]

Dann weiß ich es auch nicht pauschal. Ist der Shop öffentlich erreichbar? Dann gibt mal bitte einen Link.