Open Radar

 
Summary:
When scrolling programmatically using JavaScript, the hit area for a link (<a> element) that has its CSS position set to fixed, scrolls with the page instead of staying with the fixed <a> element. This means that after the programmatic scroll, the <a> element is still shown in the right place, namely at the same position where it was before the scroll, but the hit area has moved, meaning the text for the link is no longer tappable. The moved hit area can be tapped, but is no longer in the same place as the text for the link.

Steps to Reproduce:
Check out this example: http://fiddle.jshell.net/H7hrW/11/show/, with the HTML, CSS and JavaScript code here: http://jsfiddle.net/H7hrW/11/
OR build an HTML/CSS/JavaScript page:
- Add an <a> element with CSS styling `position: fixed;`.
- Make sure the page's height is larger than the viewport height, so scrolling will be possible.
- Scroll programmatically, using the jQuery $(window).scrollTop(scroll_offset) method for example.
- Try tapping the <a> element.

Expected Results:
The <a> element is tappable: the hit area is in the same place as the text for the link.

Actual Results:
The <a> element is not tappable, and a bit of tapping around the page on the same horizontal position as the text for link will show that the tappable hit area has moved with the page when it was scrolled.

Regression:
The problem occurs all the time on iOS 5.1; I haven't tested earlier versions of the OS or MobileSafari.

Notes:
The problem can be seen "in action" here: http://fiddle.jshell.net/H7hrW/11/show/
All the relevant HTML, CSS and JavaScript code can be found here: http://jsfiddle.net/H7hrW/11/