Как решить проблему с отображение элементов кнопки на ретина дисплеях?

Question

[belbecek]

Все добрый вечер.
Помогите пожалуйста не у кого спросить.
Есть сайт sellsay.com/keep-me-updated , конкретно по это ссылке есть форма подписки на рассылку.
Попросили сделать кнопку с текстом и иконкой конверта.

Все сделал работало на всем корректно, но потом проверили на Iphone и тут появилась проблема

Не знаю что делать, может кто подскажет как решить проблему.
Заранее всем спасибо

Comments

[Андрей]

"Включи в настройках айфона веб инспектор в сафари, потом сделай тоже самое в настройках сафари для мака, затем подключи айфон к маку. Теперь кликай девелопер меню - твой айфон и там будет список открытых в данный момент сайтов на айфоне, выбери тот, который нужно испектировать и сафари на маке откроет отдельное окно веб инспектора." (с)
И в десктопной сафари тоже кнопка не фонтан:
https://www.dropbox.com/s/a52dsjc5b8r7q8w/%D0%A1%D...

upd
И кнопка send в разделе контактов так же себя ведет и еще какой-то горизонтальный скролл появляется на пару пикселей справа. Если сделать zoom-out то скролл пропадает, но появляется зазор на те самые пару пикселей.
Тестировал на 6s живом.

[belbecek]

Андрей: Спасибо

Answer 1

[dom1n1k]

Проблема в иконке - это ж не картинка, это иконочный шрифт.
а) не задана line-height (задай 1)
б) позиционирование магическими числами
В целом верстка элемента переусложнена по непонятным причинам (зачем там флекс, если позиционируется иконка абсолютно?)