select menu inside a div with fixed position on mobile safari, iphone -
i building site has header fixed position contains select menu. header supposed stay locked top of screen due position:fixed in css. however, when clicking select menu in mobile safari on iphone, header no longer stays locked top when ios select menu opens. seems ios centering div select menu onto visible area of screen above menu. doesn't happen when page scrolled top, when address bar not visible, "breaks" so. haven't found other answers, maybe i'm asking question wrong way. can't post links code yet, appreciated.
http://selfconstruc.tv/menu-open.png http://selfconstruc.tv/menu-closed.png
for don't think there perfect solution deal focus jumping. in case hide header on focus in , show again in focus out , works well. don't know if in case workaround.
you can try this:
// detect ios device if(navigator.useragent.match(/(ipad|iphone|ipod)/gi)){ // hide header on focus in , show on focus out jquery("#content").focusin(function(){ jquery('#your-header-id').hide(); }) jquery("#content").focusout(function(){ jquery('your-header-id').show(); }) }
the #content div should have controls, jquery .focusin() detects focus event on parent elements, every control trigger focus event. hide header on focus , show after that. hope helps!
Comments
Post a Comment