html - select menu inside <li> working on ios chrome but not on ios safari -
i working on responsive web app has menu of cities , under there many options. on desktop uses ul > li > a
on smaller screens, hides <a>
, make select/option menu visible . issue i'm facing is working fine in android. perfect in ios chrome. in ios safari have double tap list/select item open select/option menu . here code
<ul> <li id="12"> <a href="/fashion-collections/2014/1-spring-summer/1-ready-to-wear/12-kiev">kiev</a> <select class="designer-mobile-dropdown"> <option> kiev </option> <option value="/anna-k-ready-to-wear-spring-summer-2014-kiev-4971"> anna k </option> <option value="/natasha-zinko-ready-to-wear-spring-summer-2014-kiev-4945"> natasha zinko </option> <option value="/omelya-atelier-ready-to-wear-spring-summer-2014-kiev-4948"> omelya atelier </option> <option value="/paskal-ready-to-wear-spring-summer-2014-kiev-4954"> paskal </option> <option value="/sasha-kanevski-ready-to-wear-spring-summer-2014-kiev-4960"> sasha kanevski </option> <option value="/yasya-minochkina-ready-to-wear-spring-summer-2014-kiev-4951"> yasya minochkina </option> </select> </li> </ul>
on smaller screen:
ul > li > { display: none }
i've given transition
effect works fine in ios chrome not in ios safari
box-shadow: 0px 0px 10px #777 background: rgba(255,255,255,1) z-index: 5 -webkit-transition: 1s ease 0s transition: 1s ease 0s
double tap means: on 1st tap on li > select
, runs transition on 2nd tap, opens ios native select/option menu. have make open on single tap !
fortunately i've resolved somehow. had :hover enabled in css , guess cause of problem in ios safari.
when commented smaller sized devices using media query, worked me. running perfect on ios safari ios chrome
Comments
Post a Comment