Проблемы с svg елементами в инпутах при кроссбраузерности
Всем здравствуйте, буду очень благодарен если кто-то поможет решить мою проблему. Я сделал сайт и запушил его на github вот ссылка https://bogdangapon.github.io/my-first-adaptive-site-/
В хроме при нажатии на кнопку Заказать услугу svg елементы в input отображены нормально, как и следует макету, ну это только в Chrome, на телефоне в Internet Samsung Browser, Safari - svg елементы отображаются вверху или снизу, как будто на то расстояние, которое указано изначально top: 50%; transform: translateY(-50%);, но только работает не правильно.
Я думал проблема в кроссбаузерности и закинул код в autoprefixer, но проблема не решилась.
Как сделать так что бы форма выглядела в других браузерах, так же как и в Хроме ?
Помогите пожалуйста кто сможет буду очень благодарен. Заранее, спасибо!!!
Ответы (1 шт):
Можем кому-то пригодится, решение проблемы было очень простое. Мой инпут оббернут в спан, который в свою очередь инлайн элемент, и стоило мне только дать элементу display:flex; как все сразу решилось видимо из-за нефиксированного размера инлайн элемента, не знаю как по другому сказать svg элемент был по вертикали по разному расположен в разных браузерах.