I am having a really annoying issue with a Bootstrap Menu in Safari on OSX / IOS devices.
If you have a look at this page:
Link Removed
In chrome or Firefox you will see how it should look, however if you look in Safari, the middle section of the menu isn't flush to the top. This causes issues when viewing on an iPad as the text overlaps. It should look like this:
How it should look on tablet http://www.nick-harper.co.uk/howitshouldlook.gif
However, it is like this:
How it looks http://www.nick-harper.co.uk/ipad.gif
I have tried various different things but can't seem to figure out what causes it specifically in Safari.
Are there any common issues that could cause it I am missing?
Summarizing comments under the question, the problem was
float:left
. It made height of a few elements to be equal 0. Alsoposition:unset
is invalid soposition:absolute
from another selector was in use.