javascript - Scrolling through "touchmove" is choppy -


i wanted "position:fixed" on mobile devices (i have android one) - , doesn't exist.
faked creating 2 divs heights of summed height of screen (using js) , added touch listeners bottom div. events adjust scrolltop value. copy of old "touchscroll.js".

the scrolling works successfully, added sling feel. however, entire scroll choppy compared when os scrolls view of window.

i've read on random places, , somewhere here add -webkit-backface-visibility:hidden; , -webkit-transform:translate3d(0,0,0); css bits solve chop. tried on div itself, on body, backface part, transform etc... permutations... nothing helped. chop still existed, , tricks stopped keyboard appearing in inputs

i tried create internal div within scrolling one, , instead of adjusting scrolltop value move internal div making position:absolute , adjusting it's top. made no difference.

is there solution beat chop?
example here: http://mobile.phantasyrpg.com/so-example

unfortunately there might not solution this, android browsers known poor rendering performance. different android version/device/browser combinations show different performance , compatibility, matter of fact, example runs quite smooth on android 4.0.4 chrome, not functional on factory browser.

as general rule, try use css transformations, , after other properties (like scrolltop), transformations hardware accelerated. (as it's case in ios mobile safari, , modern android browsers).

i suggest try latest version of touchscroll or iscroll, because both use css transformations, , may contain other optimizations well.

the -webkit-transform:translate3d(0,0,0); setting used enforce hardware acceleration, , should used on element changing/moving (the content div in case). if use new versions of scroll libraries, overwrite -webkit-transform property anyway. -webkit-backface-visibility appropriate if -webkit-transform applied on element, setting hidden may resolve unwanted flickering or may provide performance gain in cases.


Comments

Post a Comment

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script> </head> <body> <button id="cmd_create_event" name="cmd_create_event" type="button">create new `event`</button> <script type="text/javascript"> var eventmodel = backbone.model.extend({ initialize : function() { console.log("`event` initialized. id: " + this.cid); this.bind("change:status", function() { console.log(this.get("status") + " value `status`"); }); this.bind("error", function(model, e...
Read more

php - Get uncommon values from two or more arrays -

is there function in php give array of uncommon values 2 or more arrays? for example: $array1 = array( "green", "red", "blue"); $array2 = array( "green", "yellow", "red"); .... $result = function_needed($array1, $array2,...); print_r($result); should give output: array("blue", "yellow", ...); use array_diff , array_merge : $result = array_merge(array_diff($array1, $array2), array_diff($array2, $array1)); here's demo. for multiple arrays, combine callback , array_reduce : function unique(&$a, $b) { return $a ? array_merge(array_diff($a, $b), array_diff($b, $a)) : $b; } $arrays = array( array('green', 'red', 'blue'), array('green', 'yellow', 'red') ); $result = array_reduce($arrays, 'unique'); and here's demo of that.
Read more

Adding duplicate array rows in Php -

i create function in php adds rows of array shared column value. so input. $test = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); and output. $testduplicatefree = array( array("c", 7, 9), array("test", 5, 6) ) ); i'm thinking function combine_duplicates($array,$col){ ... ... return $duplicatefreearray; } where $col duplicate free array. so, in case, combine_duplicates($test,0); would me desired output. this. <?php function combine_duplicates($array,$col) { $index = array(); foreach ($array $row) { $key = $row[$col]; if (!isset($index[$key])) { $index[$key] = $row; } else { ($i = 0; $i < count($row); ++$i) { if ($i != $col) { $index[$key][$i] += $row[$i]; } } } } return array_values($index); } $array = array( array("c", 5, 6), array("c", 2, 3), array("test", 5, 6) ); print_r(combine_duplicates($array, 0)); try here: http://codepad.org/mdhesqhi
Read more