Nachfrage addons.mozilla.org Button

  • Firefox-Version
    86.0.1
    Betriebssystem
    Windows 10

    Hallo zusammen,

    ich habe eher eine technische Frage.

    Beim Installieren von AddOns unter Firefox ist mir aufgefallen, dass bei manchen AddOns beim Button '+ Zu Firefox hinzufügen' beim on-Click die Schrift ein paar wenige Milli nach unten rutscht und bei einigen AddOns nicht.

    Teilweise ist das bei unterschiedlichen Rechnern (mit unterschiedlicher Internetanbindung) immer verschieden.

    Daher meine technische Frage: Ist das Ganze Serverabhängig und warum ist das bei manchen AddOns so und bei manchen nicht? Beim deployen von Firefox und der Installation ist mir dieses Verhalten diese Woche das erste Mal aufgefallen.

    Wahrscheinlich ist die Frage ein wenig 'uninteressant', aber mich würde der technische Hintergrund interessieren^^.

    Grüße

  • Hey,

    srry wenn ich nochmal kurz nerve.

    Bei HTTPS-Everywhere ist das padding als action auch vorhanden.

    Mir ist jedoch aufgefallen, dass lediglich das Plus-Icon sich um 1 px verschiebt. Sobald ich den Wert auf 2 px ändere, sieht man die Änderung adhoc.

    Bei allen anderen AddOns ist die Änderung im Inspektor bei der Pseudoklasse ':active' sofort sichtbar.

  • Es gibt keinen unterschiedlichen Code pro Erweiterung, der Code der Website ist für alle Add-ons der Gleiche. Da es hier lediglich um 1px geht, will ich nicht ausschließen, dass es unter ganz bestimmten Umständen durch Rundungsverhalten keine sichtbare Veränderung gibt, aber reproduzieren kann ich es nicht und es steckt in jedem Fall keine besondere Absicht dahinter.

  • Wenn bei mir das Browser-Fenster maximiert ist, dann ist es so wie IT-T0bi beschrieben hat. Bei bestimmten Add-ons (z.B.: 'https-Everywhere' wird kein padding ausgeführt bzw. dargestellt. Wenn das Fenster hingegen nicht maximiert ist, dann funktioniert der Button-Effekt bei jedem Add-On. :/

  • Maximiert oder nicht kann nicht der Auslöser sein, denn eine Website hat überhaupt keine Möglichkeit, das zu erkennen. Dann muss es schon eher die daraus resultierende unterschiedliche Viewport-Größe sein, die mit reinspielt. Übrigens ist mein Fenster auch maximiert und es ist für mich nicht reproduzierbar.

    Ich bin mir nicht sicher, was du mit "wird kein padding aufgerufen" tatsächlich meinst, aber ich verstehe das so, als würde es das wirklich nicht im Code geben. Zeige das doch bitte mal per Screenshot.

  • '

    Ich bin mir nicht sicher, was du mit "wird kein padding aufgerufen" meinst, aber das klingt so, als würde es das tatsächlich nicht im Code geben. Zeige das doch bitte mal per Screenshot.

    'wird kein padding aufgerufen' hatte ich ca. 10 Sekunden nach dem Posten schon korrigiert. Auf jeden Fall bevor du geantwortet hast!

    Ich werde eine Animation dazu machen...

  • Für mich braucht es keine Animation, ich habe das "Problem" ja verstanden. Tatsächlich interessant wäre, ob der Code in dem Fall ein anderer ist. Wenn der Code identisch ist, dann wird es so sein, wie ich bereits schrieb, dass es unter ganz bestimmten Umständen zu einer Rundungsungenauigkeit in der Darstellung kommt. Dafür spricht auch, dass bereits bei der Erhöhung um ein weiteres Pixel eine Bewegung zu erkennen ist.

    PS: Der Satz "Auf jeden Fall bevor du geantwortet hast!", und das sogar mit Ausrufezeichen, irritiert mich, da meine Antwort nicht zwei Stunden, sondern keine zwei Minuten nach deiner Bearbeitung erfolgte. Und das heißt ja auch nicht, dass ich zwei Minuten nach deinem Nachtrag mit Schreiben angefangen hätte. Sowohl das Lesen deines Beitrags als auch das Schreiben meines Beitrags dauert Zeit und ist nicht ist in zwei Sekunden erledigt. Insofern hatte ich, realistisch betrachtet, fast keine Chance, deine Bearbeitung vor meiner Antwort überhaupt zu sehen.

  • Für mich braucht es keine Animation, ich habe das "Problem" ja verstanden.

    Ok, wenn das Problem geklärt ist, dann werde ich die gifs, die ich aufgenommen habe, hier nicht posten.

    Gegenfrage: Wie kann es bei dem Code in der styles.scss zu einem 'Rundungsfehler' kommen? Das ist doch ein Objekt mit einer festen Größe...

    Könnte es vielleicht hieran liegen? (styles.scss: Zeile 81) Edit: Nein.

    CSS
    // Small text is difficult to read against the bright Photon colors
    // since it is blurry. This isn't (yet) part of the spec but added this
    // because it improves accessibility. See:
    // https://github.com/FirefoxUX/photon/issues/264#issuecomment-364927535
    letter-spacing: 0.01rem;

    2 Mal editiert, zuletzt von BrokenHeart (21. März 2021 um 07:22)

  • Der Auslöser für das unterschiedliche Verhalten des Installations-Buttons (bei Größenänderung des Browserfensters) ist die Zentrierung der Schrift bzw. des Flex-Containers. Wenn man das Zentrieren anders berechnet oder zu Testzwecken hart codiert, dann stellt er den 'Eindrückeffekt' des Buttons immer da. Keine Ahnung, ob hier 'Rundungsfehler' eine Rolle spielen, schon möglich. Ich denke, hier liegt ein Fehler im CSS-Code vor, zumal ja der Autor selber im Kommentar schreibt, dass er das 'padding' extra für Farbenblinde eingefügt hat. Aber dies nur an bestimmten Stellen auszuführen, ist meiner Meinung nach dann doch eher inkonsequent.

    IT-T0bi Bitte mal testen:

    In 'userContent.css' einfügen: