Webkit Bug / Version

[heinetz]

Hallo Forum,

ich habe einige Zeit danach gesucht, warum meine Website auf meinem iPad-Simlutor mit iOS 6.0 anders dargestellt wird, als im aktuellen Firefox/Chrome/Safari. Irgendwann ist mir klar geworden, dass es an mit dem folgenden Konstrukt zusammenhängen muss:

.myclass:.before {
position: absolute;
display:block;
content:"";
margin-top: -10%;
}

Konkret wurde der Inhalt in meinem mobilen Safari anders positioniert, als in den Desktop-Browsern. Irgendwann habe ich dann herausgefunden, dass der Webkit-Browser die prozentuale marin-top nicht wie vorgesehen in Relation zur Breite des umgebenen Containers berechnet, sondern zu dessen Höhe. Nun habe ich mich auch so weit vorgekämpft, dass ich einen entsprechenderen Bug-Report gefunden habe:

https://bugs.webkit.org/show_bug.cgi?id=54613

So, nun könnte ich das Problem lösen, indem ich per JS diese Berechnung vornehme um dann per JS Pixelwerte in das Style-Attribut der betroffenen Objekte schreibe.

Das möchte ich aber nur bei den betroffenen Browsern machen und den UA würde ich sogar die Webkit-Version hausfinden und könnte davon abhängig reagieren. Was ich aber nicht herausfinde ist welche Version betroffen bzw. ab welcher Version der Bug behoben ist.

In dem Bug Report steht, der Fehler sei mit der Version 528+ behoben wenn ich richtig lesen kann. Mein Safari gibt sich aber als Webkit 536.26 aus und trotzdem sehe ich da den Fehler.

Kann mir jemand verraten, wie ich das richtig recherchiere?

gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

.myclass:.before {
position: absolute;
display:block;
content:"";
margin-top: -10%;
}

(1) Das Konstrukt scheint mir recht abenteuerlich. Was willst du damit erreichen?

Womöglich lässt sich das auch anders erreichen, z.B. mit der Einheit vw.

(2) Der Bug wurde vor über 3 Jahren gefixt. Chrome und Opera sollten auf dem Laufenden sein. Auch Safari erfährt hin und wieder ein Update. Blieben noch alte Android-Browser …

Ist die Seite denn unbenutzbar in Browsern, die von diesem Bug betroffen sind? Wenn nein, ist es wohl kaum noch der Mühe wert, sich für Nutzer im Promillebereich^[1] darum zu kümmern.

(3) Falls doch: user agent sniffing ist nie™ eine gute Idee. Außerdem kostet die Browser„erkennung“ auch Zeit. In der Zeit kannst du auch gleich margin-top für alle Browser setzen.

Bedenke aber, dass du, wenn das Element keine absolute Breite hat, auf resize lauschen musst und bei jeder Änderung der Viewportgröße margin-top neu berechnen musst.

LLAP 🖖

---

1. Anzahl, nicht Alkoholspiegel ↩︎

[heinetz]

@@heinetz

.myclass:.before {
position: absolute;
display:block;
content:"";
margin-top: -10%;
}

(1) Das Konstrukt scheint mir recht abenteuerlich. Was willst du damit erreichen?

stimmt, das liegt daran, dass ich nicht besonders genau war ;)

.myclass::before {
    content: " ";
    display: block;
    margin-top: -10%;
    padding-top: 10%;
    position: absolute;
    width: 100%;
}

so ist es richtig. Ich habe das erzeuge so eine Box, die direkt oberhalb der Box .myclass dargestellt wird. Diese Box hat eine Höhe, die in Relation zu Ihrer Breite stehen soll.

gruss, heinetz