Raik (unangemeldet): calc() rechnet falsch?

Testcase:

<style> .test {height: 60%; width: calc(60 * 1%); outline: 1px solid red;} </style> <div style="width:100px; height:100px;"> <div class="test"></div> </div>

Die Breite wird mit calc() nicht, wie ich erwarten würde, als (60% von 100px) 60px ermittelt, sondern als 59.9833px. Hab ich da einen Verständnisfehler in der Arbeitsweise von Calc(), oder ist das ein Bug?

  1. Hallo Raik,

    man könnte nun schulterzuckend sagen: hast Du sonst keine Probleme, dass Dich zwei Tausendstel-Pixel aufregen? Aber natürlich wäre das unfair, solche merkwürdigen Phänomene können einem den Schlaf rauben.

    Du hast es richtig verstanden. Aber dein Browser scheint verwirrt - bei mir in Desktop-Chrome für Windows passiert das nicht.

    Welcher Browser, welches Gerät? Liegt ggf. ein Retina-Display vor, so dass die physikalischen Pixel nicht mit den logischen CSS Pixeln übereinstimmen. Und wie ich heute noch in einem anderen Thread gesehen habe, sind die Verhältnisse von physisch zu logisch durchaus krumm. Dadurch kann es dann in Folge Rundungsfehler geben.

    Fazit: Handgemacht pixelgenaues Layout ist sowas von 2007 - das lassen wir besser. Statt dessen soll es der Browser richten, mit Layout-Modulen wie flexbox und grid. WIR sagen ihm nur, wieviele em oder rem wir wollen.

    Rolf

    -- Dosen sind silbern
    1. Firefox unter Win7

      Rundungsfehler bei Bruchrechnungen wären mir ja verständlich, aber an dieser Stelle mathematisch für mich nicht nachvollziehbar.

      1. Hallo Raik,

        für mich auch nicht. Habe das gerade im Firefox nachvollzogen - Faktor 40 und 60 sind falsch. Ich habe kein Retina-Display und die Anzeige auch nicht gezoomt.

        In guter alter Dr. McCoy-Tradition: Ich bin SelfHTMLer, kein Firefox-Chirurg. Und als solcher kann ich googlen. Darum habe ich ein Trostpflaster für Dich:

        Du bist nicht allein!

        Und da steht auch eine denkbare Ursache - auch wenn dein calc() eigentlich zu simpel ist, um davon betroffen zu sein: FF rechnet intern mit Integer-Werten statt Pixeln. Genauer: er rechnet mit 60tel Pixeln. Eine Breite von 100px sind also 6000 Firefox-Einheiten, 1% davon sollten 60 sein und 60⦁60 = 3600. Offenbar haben sie irgendwo den berüchtigten "um 1 daneben" Bug drin, denn 59.9833 ist \frac{3599}{60}, ihnen ist also genau ein sechzigstel von der Tischkante geflutscht.

        Hier in SelfHTML kann ich es jedenfalls nur als "ja, der Fuchs hat so scharf nachgedacht, dass er sich dabei geschnitten hat" bestätigen. Und nochmal wiederholen: Pixel sind nicht der Weisheit letzter Schluss im modernen Web. Pixelgenaue Layouts auch nicht. Und damit ist's dann eigentlich wurscht, ob da ein sechzigstel fehlt oder nicht. Danke, Mozilla! 😉

        Rolf

        -- Dosen sind silbern
        1. Der Link vom Matthias ist da übrigens sehr erhellend. Wer hätte z.B. gedacht, daß bei der Subtraktion fast gleichgroßer Zahlen Fehler von 11% auftreten können?

          Lies ihn mal, es lohnt sich.

  2. Hallo Raik (unangemeldet),

    Hab ich da einen Verständnisfehler in der Arbeitsweise von Calc(), oder ist das ein Bug?

    imho weder noch.

    Bis demnächst
    Matthias

    -- Rosen sind rot.
    1. Hab mir jetzt den Artikel mal in Ruhe zu Gemüte geführt, man ahnt ja nicht, mit was für fiesen Problemen sich die Computer unseretwegen rumschlagen müssen. Mein vollstes Mitleid gilt ihnen angesichts dieser Torturen, die wir ihnen aufbürden.

      Berechnungen unter Beteiligung von Prozentwerten haben da ob des oft nicht so offensichtlichen Kontextes übrigens zum Teil sehr überraschende Ergebnisse. ("Kontext" = DOM-Element, auf das sie sich beziehen)