Tengo el siguiente HTML:

 <div className={styles.checkBox}> {((props.itemsWithSelection && props.itemsWithSelection?.[key] == 1) || (!props.itemsWithSelection && invoiceItemsIncluded2[key].defaultValue == 1)) && ( <Check2 className={styles.checked} /> )} </div>

y el css:

 .checkBox { background-color: #12341b; top: 30px; left: 170px; height: 60px; width: 60px; position: absolute; transition: 0.2s; z-index: 5; } .checked { color: white; padding: 10px; }

En Chrome, el icono de la marca de verificación está bien centrado, pero no en Safari, ¿por qué?

Si no uso ningún relleno (10 px), entonces se ve bien.