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

How has firefox/gecko HTML+CSS rendering changed in version 38? -

javascript - Complex json ng-repeat -

jquery - Cloning of rows and columns from the old table into the new with colSpan and rowSpan -