title: Webkit rendering quirks for element with "position:fixed" and "-webkit-backface-visibility: hidden;"?
body: <p>Recently I encountered a rendering issue in Webkit which I suspect to be a bug with the Webkit engine. But I am not confident enough to say so. So I would like ask here and see what you think.</p>
  
  <p>It'd be a bit difficult for me to describe the case in plain text, so I prepared a snippet here:
  <a href="http://jsfiddle.net/2eQXa/1/" rel="nofollow">http://jsfiddle.net/2eQXa/1/</a></p>
  
  <p>First you can see a yellow background with red border. This is not a background of the &lt;body&gt; tag but a &lt;div&gt; with id "backdrop" which has 100% width and height. By default it links to the "backdrop-no-problem" class. Also there is a horizontal list with some images. The list is surrounded by a green border. Inside the list there are some Wikipedia logos wrapped with a dotted red border.</p>
  
  <p>I tested the page with the following 3 devices:
  1. Chrome 21 on Windows 7
  2. Mobile safari on the first generation iPad (running iOS4, I'll call it iPad1) 
  3. Mobile safari on the "new" iPad (running iOS5, I'll call it iPad3)</p>
  
  <p>Try clicking "right" or "left" to scroll the list. Pretty good.</p>
  
  <p>To reproduce the my problem, first click on "Issue #1". This will change the backdrop div from "position:absolute" to "position:fixed". Then click "Issue #2". This will add "-webkit-backface-visibility: hidden;" to the element (The reason for adding this style is to ensure smooth animation on the iPad).</p>
  
  <p>Now click "left/right" to scroll the list. You should see a strange behavior in all three browsers: 
  The green div is scrolling properly and smoothly, but not its child elements. The child elements simply "out-sync" with the position of the scrolling parent. The movement not only looks laggy, it sometimes even stuck. And the child elements will stop at a wrong position when the scrolling animation finishes. You have to move your mouse over the picture (or tap on it in a tablet) to trigger an update to have the element re-drawn at the right place. Even Chrome shows this weirdness makes me feel that it is a Webkit issue.</p>
  
  <p>Things gone worse in iPad3. In iPad3 you don't need to add "-webkit-backface-visibility: hidden;" (Issue #2) to see this weird behavior. Just add "position:fixed" (Issue #1) will do. The strange thing is that this doesn't happen when you view the snippet in jsFiddle. In case you are interested I have put the source in a single file at pastebin:</p>
  
  <p><a href="http://pastebin.com/i4ARX4mD" rel="nofollow">http://pastebin.com/i4ARX4mD</a></p>
  
  <p>When writing this question I saw quite a number of questions regarding backface visibility. I've checked some but none of them matches my problem. </p>
  
  <p>Ideas or suggestions are welcome. Thanks!</p>
  
  <p>(Post updated to fix many typos)</p>