Nachfrage addons.mozilla.org Button

Hallo,

die Schrift geht bei Klick immer 1px nach unten. Vielleicht fällt es dir nur nicht immer auf, weil man das nur einen sehr kurzen Moment sieht und Ladezeiten ja nicht immer gleich sind. Das hängt nicht vom System oder der Erweiterung ab, das ist einfach das Design der Seite.

Zitat von IT-T0bi

dass bei manchen AddOns

Die da wären?

Auch bei HTTPS Everywhere ist das der Fall. Wie gesagt, das ist das Design der Seite.

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.

'

Zitat von Sören Hentzschel

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.

Zitat von Sören Hentzschel

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.

// 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;

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:

@-moz-document domain("addons.mozilla.org")
{
    .AMInstallButton .AMInstallButton-button {
        align-items: unset !important; 
        line-height: 3.0 !important; 
    }

    .AMInstallButton .AMInstallButton-button .Icon {
        margin-top: 13px !important;
    }
}