Css Styling behaving differently on iOS vs Android & Web browsers


Has anyone else experienced differences in the way the html is rendered to the display between iOS and Android (& web browser)?

I have a view with 3 icons that are centered along the y-axis in a single row…

On Android and in web browser: All the content is evenly spaced and is properly centered.

On iOS devices: The spacing is uneven and the icons are no longer centered. Another icon at the bottom of the view (completely separate CSS) is also being pushed out of alignment…

Has anyone experienced something like this? I have already spent a few hours trying to isolate the issue with no luck.



Are you using an own icon-font?


I was using a non-default font. I switched back to the default ionic font in my sass file- but the problem persists.