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

Popular posts from this blog

c# - Where does the .ToList() go in LINQ query result -

android - CollapsingToolbarLayout: position the ExpandedText programmatically -

Listeners to visualise results of load test in JMeter -