css - Strange mobile nav issue on iOS -

i'm trying create simple mobile nav menu. looks fine on desktop chrome, have noticed couple of issues on iphone 6 plus:

safari: when tapping hamburger open menu, cross moving when should in same place hamburger.

chrome: above issue isn't present, have noticed intermittent issue hamburger/cross mixed , show @ wrong time (eg: cross showing when menu closed).

i presume i've done fundamentally wrong here - can please help? :)

i presume may related css applied when menu open:

ul.topnav.responsive li { position: relative; display: block; text-align: center; margin-top: 10px; padding: 10px 5px;

}

thanks

WIn