Flexbox под Safari + hover
 

Очень надеюсь, что матерые верстальщики или фронтендщики просмотрят и дадут ответ, уже 2 день бьюсь с этой проблемой, пока лишь мысл переверстать все, но надежда умирает последней :(

Все было сверстана в попытке применить flex и попробывать что-то новое.

Первый блок: html https://gist.github.com/AndrewUstime...9a18c9996f5609
+ css
https://gist.github.com/AndrewUstime...91a81dec4181cb

И второй блок для сравнения
html https://gist.github.com/AndrewUstime...257761136393d6
+ css
https://gist.github.com/AndrewUstime...c293a7ada4012f

миксин флекс убран в последнем билде и изменен на display: flex; так же убраны префиксы, так как все прогоняется через автопрефиксер (до этого ставил специально, чтобы удостовериться, что ничего не пропущено).

Суть вопроса в том, что 1 блок адаптируется под мобильные устройства и "едет" , 2 же остается неизменным, в нем ничего не перестраивается и он в одну строку =( Тестили на версиях сафари от 7. Уже нет сил, биться с этим убогим браузером :cray: , везде ок, на на этом ни в какую. Может кто подскажет в чем проблема, все что видел на стэковерфлоу перепробывал, реакция нулевая, проблем добавляет еще тот факт, что нету сафари :(

Так же, вторая проблема, с которой встретился, это наотрез отказывается работать hover / focus , перепробывал многое, остался лишь вариант добавить через js он тач и ховер классы, разве так все плохо и нет чего-то компактного? Или сафари так убог?

Ну и 3 проблема....

Если центрировать контент тега "a" через flex , то все ок на всех браузерах, если же тот же код применять к input , центровка не происходит и контент прибивает к bottom.

Буду очень благодарен, кто сможет подсказать решения в данных проблемах :victory: