secret
Created

Mobile Webkit reflow issue

  • Download Gist
issue.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mobile Webkit reflow issue</title>
 
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
 
<style type="text/css">
#lipsum {
margin-left:4em; padding:0;
}
#index {
background-color:black; bottom:0; display:block; left:0; margin:0; padding:0; position:fixed; top:0; width:3em;
}
#index li a {
color:white; cursor:pointer; display:block; line-height: 2em; text-align:center; text-decoration:none;
}
</style>
</head>
<body>
 
<div id="lipsum">
<h2 id='A'>A</h2><ul>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
</ul><h2 id='B'>B</h2><ul>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
</ul><h2 id='C'>C</h2><ul>
<li>Cras tempor augue non magna mattis tempus.</li>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
</ul><h2 id='D'>D</h2><ul>
<li>In quis lacus justo, facilisis vehicula justo.</li>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
</ul><h2 id='E'>E</h2><ul>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
</ul><h2 id='F'>F</h2><ul>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='G'>G</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='H'>H</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='I'>I</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='J'>J</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
</ul><h2 id='K'>K</h2><ul>
<li>Nulla facilisis nisi sit amet elit hendrerit eget pulvinar augue imperdiet.</li>
<li>Etiam vitae neque vitae quam imperdiet vestibulum sed et nisl.</li>
<li>Nunc rhoncus lacinia dui, vitae laoreet nunc suscipit sit amet.</li>
<li>Quisque ultrices nisi id sem feugiat eget varius odio cursus.</li>
</ul><h2 id='L'>L</h2><ul>
<li>Morbi sit amet mi metus, commodo accumsan lacus.</li>
<li>Morbi dapibus nibh eget elit ultricies gravida.</li>
<li>Nulla auctor sapien eget quam elementum molestie.</li>
<li>Duis vehicula pharetra metus, id cursus mauris pellentesque id.</li>
</ul><h2 id='M'>M</h2><ul>
<li>Mauris nec dui lorem, at sodales justo.</li>
<li>Mauris rutrum sagittis leo, quis suscipit neque ullamcorper nec.</li>
<li>Praesent lacinia dui id tortor imperdiet placerat.</li>
<li>Nulla et libero sodales erat iaculis consequat.</li>
</ul><h2 id='N'>N</h2><ul>
<li>Integer tincidunt mollis dui, id viverra nibh suscipit nec.</li>
<li>Fusce sed dolor turpis, et porttitor eros.</li>
<li>Duis vel massa in velit suscipit accumsan non nec magna.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul><h2 id='O'>O</h2><ul>
<li>Aliquam a nunc a ante facilisis auctor.</li>
<li>Nulla volutpat faucibus risus, et volutpat arcu fringilla quis.</li>
<li>Nullam sit amet urna magna, ut malesuada risus.</li>
<li>Ut faucibus nulla pharetra neque volutpat ultricies.</li>
</ul><h2 id='P'>P</h2><ul>
<li>Nulla volutpat lacus id tellus viverra ornare.</li>
<li>Fusce feugiat aliquet velit, sed dapibus mi vestibulum vitae.</li>
<li>Sed porttitor eros non quam aliquam porttitor.</li>
<li>Curabitur tempus purus vel lorem vulputate id sodales ipsum lacinia.</li>
</ul><h2 id='Q'>Q</h2><ul>
<li>Nunc luctus mi et odio convallis sed imperdiet nunc varius.</li>
<li>Proin hendrerit placerat quam, at interdum massa placerat non.</li>
<li>Pellentesque non nunc at erat sollicitudin viverra.</li>
<li>Cras tempor augue non magna mattis tempus.</li>
</ul><h2 id='R'>R</h2><ul>
<li>Mauris commodo dapibus massa, vel ultricies libero suscipit in.</li>
<li>Maecenas sit amet urna sit amet quam hendrerit blandit in vel lacus.</li>
<li>Etiam in lacus nec purus facilisis varius.</li>
<li>In quis lacus justo, facilisis vehicula justo.</li>
</ul><h2 id='S'>S</h2><ul>
<li>Duis quis est ac sem tincidunt consequat.</li>
<li>Cras laoreet tempor dolor, vel hendrerit nibh mattis ac.</li>
<li>Duis fermentum sem id nisi vestibulum fermentum.</li>
<li>Etiam volutpat dictum ligula, vel laoreet odio auctor a.</li>
</ul><h2 id='T'>T</h2><ul>
<li>Sed sodales vehicula augue, et tincidunt risus mattis quis.</li>
<li>Suspendisse ac magna vel sapien sagittis accumsan.</li>
<li>Praesent ac elit augue, at condimentum velit.</li>
<li>Cras quis nulla quis dolor vehicula pulvinar laoreet quis urna.</li>
</ul><h2 id='U'>U</h2><ul>
<li>Ut a enim sit amet ipsum pretium commodo eget interdum nunc.</li>
<li>Proin tristique tempus est, nec placerat nisi gravida vel.</li>
<li>Ut ac nisl a libero tincidunt vehicula.</li>
</ul><h2 id='V'>Z</h2><ul>
<li>Donec vulputate orci nec justo laoreet rutrum ac ut mauris.</li>
<li>Nunc scelerisque eleifend nisl, eu pellentesque velit hendrerit a.</li>
<li>Nunc posuere enim commodo nunc dapibus gravida.</li>
<li>Suspendisse sed sem sagittis libero vulputate bibendum.</li>
</ul><h2 id='W'>W</h2><ul>
<li>Donec eu magna et lorem cursus dictum.</li>
<li>Ut placerat libero ac sem aliquam eu sodales eros interdum.</li>
<li>Phasellus ut tortor ac risus elementum semper.</li>
<li>Aliquam id augue ac lorem elementum eleifend sed sit amet metus.</li>
</ul><h2 id='X'>X</h2><ul>
<li>Donec pulvinar justo tristique tellus dapibus vitae blandit ipsum porttitor.</li>
<li>Phasellus volutpat magna eget elit dapibus ac tincidunt turpis ullamcorper.</li>
<li>Sed ut urna at mauris suscipit imperdiet.</li>
<li>Phasellus porta quam in nisl ultricies vitae vehicula lorem dignissim.</li>
</ul><h2 id='Y'>Y</h2><ul>
<li>Vestibulum aliquet massa sed velit tincidunt iaculis.</li>
<li>Integer pretium adipiscing ligula, eget posuere magna varius sit amet.</li>
<li>Phasellus at lacus eget ipsum malesuada rhoncus.</li>
<li>In venenatis pulvinar tortor, porttitor blandit magna dignissim at.</li>
</ul><h2 id='Z'>Z</h2><ul>
<li>Sed tincidunt neque in odio molestie in sodales magna posuere.</li>
<li>Sed porta eros id eros eleifend vel euismod libero fringilla.</li>
<li>Sed non dui vel ante scelerisque fermentum.</li>
<li>Praesent eget felis odio, pellentesque dignissim massa.</li>
</ul>
</div>
 
<ul id="index"><li><a href="#A">A</a></li><li><a href="#B">B</a></li><li><a href="#C">C</a></li><li><a href="#D">D</a></li><li><a href="#E">E</a></li><li><a href="#F">F</a></li><li><a href="#G">G</a></li><li><a href="#H">H</a></li><li><a href="#I">I</a></li><li><a href="#J">J</a></li><li><a href="#K">K</a></li><li><a href="#L">L</a></li><li><a href="#M">M</a></li><li><a href="#N">N</a></li><li><a href="#O">O</a></li><li><a href="#P">P</a></li><li><a href="#Q">Q</a></li><li><a href="#R">R</a></li><li><a href="#S">S</a></li><li><a href="#T">T</a></li><li><a href="#U">U</a></li><li><a href="#V">V</a></li><li><a href="#W">W</a></li><li><a href="#X">X</a></li><li><a href="#Y">Y</a></li><li><a href="#Z">Z</a></li></ul>
 
</body>
</html>
reflow.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
(function(){
var THROTTLE = 100,//ms
_timer = 0,
_dom = document.documentElement,
_width = _dom.style.width,
reset = function(){
// reset size, unfortunately forces another reflow
_dom.style.width = _width;
},
forceReflow = function(){
if (_timer) {
clearTimeout(_timer);
_timer = 0;
}
 
_width = _dom.style.width;
 
// force a reflow by increasing size 1px
_dom.style.width = (_dom.offsetWidth+1)+'px';
 
setTimeout(reset, 0);
},
onscroll = function() {
if (_timer) {
clearTimeout(_timer);
}
_timer = setTimeout(forceReflow, THROTTLE);
};
 
window.addEventListener('scroll', onscroll, false);
})();

Attaching the script to the page seems to fix the issue which leads me to believe it is a CSS reflow issue.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.