css3 - Mobile Webkit reflow issue -

-

i've been experiencing issue in mobile versions of webkit (specifically webkit 534.46 on ios 5.1.1 mobile safari, , chrome ios) doesn't happen on desktop browser i've seen. (i.e. demos below should viewed on mobile version of webkit.)

here live example of issue. core of css extremely straight forward. positions alphabet index along left of page:

#index {     left:0; margin:0; padding:0; position:fixed; top:0; width:3em; }

the issue happens when element fixed position on top of body. able interacted until scroll changes , stops accepting input. if (manually) jiggle scroll 1 pixel becomes active again. example kept simple possible , not use javascript. after hammering on it, i've discovered appears element thinks scrolled has been visually fixed. in other words, if click on 'a' try click on 'a' again, second click in further down list. seemed css reflow issue me. know mobile webkit attempts reduce number of reflows.

here live example of workaround.

i able use js force css of entire document reflow on scroll (with throttle prevents happening until 100ms after scrolling) seems workaround issue in simple example. unfortunately, not real world version of issue.

this code issue page , workaround script.

my question happening here , there css workaround missing? specifically, i'm curious if css guru can figure out layout situation prevents clicks hitting correct place on fixed element? better understanding might find real fix.

edit: forgot mention example explicitly forces viewport size of window. user cannot zoom in/out, meaning position:fixed should anchor element left side of window.

update (2012-09-20): appears fixed in mobile safari on ios 6 (as uiwebview). workaround should first check make sure on ios < 6. example, using cssuseragent like:

if (parsefloat(cssua.ua.ios) < 6) { /* ... */ }

the answer solved particular issue variation of solution found in 1 of @paul sweatte's links:

essentially, plain div taller body added. when removed, causes body scroll or reflow. setting delay 0ms between adding/removing enough allow dom recalculate without causing flickering. minimal script find solved problem position:fixed elements on my particular instance of issue.

var hack = document.createelement("div"); hack.style.height = "101%"; document.body.appendchild(hack); settimeout(function(){     document.body.removechild(hack);     hack = null; }, 0);

Comments

Post a Comment

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

-
i trying reposotries using c# code process svncommand = null; var psi = new processstartinfo("svnadmin"); psi.redirectstandardoutput = true; psi.redirectstandarderror = true; psi.useshellexecute = false; psi.arguments= @"dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump"; using (svncommand = process.start(psi)) { var myoutput = svncommand.standardoutput; var myerror = svncommand.standarderror; debug.write("output :" + environment.newline + environment.newline + myoutput.readtoend() + environment.newline + "error :" + environment.newline + environment.newline + myerror.readtoend()); svncommand.close(); } when use dump command commandline svnadmin dump c:\repositories\myrepo > c:\temp\myrepodumpfile.dump it works fine when try ...
Read more

c# - Copy ObservableCollection to another ObservableCollection -

-
how copy observablecollection item observablecollection without reference of first collection? here observablecollection item value changes affecting both collections. code private observablecollection<ratemodel> _allmetalrate = new observablecollection<ratemodel>(); private observablecollection<ratemodel> _metalrateondate = new observablecollection<ratemodel>(); public observablecollection<ratemodel> allmetalrate { { return this._allmetalrate; } set { this._allmetalrate = value; notifypropertychanged("metalrate"); } } public observablecollection<ratemodel> metalrateondate { { return this._metalrateondate; } set { this._metalrateondate = value; notifypropertychanged("metalrateondate"); } } foreach (var item in metalrateondate) allmetalrate.add(item); what causing , how can solve it? you need clone object referenced item before it's a...
Read more

All overlapping substrings matching a java regex -

-
is there api method returns (possibly overlapping) substrings match regular expression? for example, have text string: string t = 04/31 412-555-1235; , , have pattern: pattern p = new pattern("\\d\\d+"); matches strings of 2 or more characters. the matches are: 04, 31, 412, 555, 1235. how overlapping matches? i want code return: 04, 31, 41, 412, 12, 55, 555, 55, 12, 123, 1235, 23, 235, 35. theoretically should possible -- there obvious o(n^2) algorithm enumerates , checks substrings against pattern. edit rather enumerating substrings, safer use region(int start, int end) method in matcher . checking pattern against separate, extracted substring might change result of match (e.g. if there non-capturing group or word boundary check @ start/end of pattern). edit 2 actually, it's unclear whether region() expect zero-width matches. specification vague, , experiments yield disappointing results. for example: string line = "xx90xx"; strin...
Read more