Icons/SVGs in Firefox verschoben

Shopware 6 (German) Themes & Design
1

Hi Community,

die Buttons vom Standard Theme sind im Firefox schlecht positioniert.
Zum Beispiel: Search Icon / + - Warenkorb / Pfeil Scrolltop / Slider Pfeile.

Beispiel aus der Demo:

Im Chrome alles top. hat jemand einen simplen CSS Trick ?

2

Ja, nervt mich auch. Habe schon diverse CSS Anpassungen versucht, jedoch verschiebt es dann andere Icons oder Elemente.

3

Die SVG-Grafik der Icons liegt immer in einem span-Tag, das in der Regel nicht die gesamte Höhe des Parents einnimmt. Dadurch kommt es im Firefox zu den Problemen. Richtig lösen kannst du es, indem du dieses Konstrukt im Template auflöst, die span dürften meistens überflüssig sein.

Im CSS kann du es z. B. für die Plus-Minus Icons so lösen, müsstest du aber noch mal im Safari testen.:

.icon-plus.icon-xs,  .icon-minus.icon-xs{
    height: 100%;
}

.quantity-selector-group .btn-outline-light svg {
    top: 0;
}

Für die Lupe im Suchfeld:

.header-search-icon .icon.icon-search {
height: 100%
}

.header-search-icon .icon.icon-search svg {
top: 0;
}

tippe oder füge den Code hier ein
1 „Gefällt mir“