title: How can CSS have a significantly negative effect on page paint time in a specific area of a web page?
body: <h2>The Question:</h2>
  
  <p><a href="http://www.html5rocks.com/en/tutorials/speed/css-paint-times/" rel="nofollow noreferrer">An invaluable article on the issue</a> - mentioned by JackPattishallJr.</p>
  
  <p><strong>How can CSS have a significantly negative affect on page paint time in a specific area of a web page?</strong></p>
  
  <p>For example:</p>
  
  <ul>
  <li><p>I didn't know CSS took effect based on the user's location in the page. Does this behavior determine that it does?</p></li>
  <li><p>Is there conflicting or unusual CSS positioning, animation, etc. that might cause poor performance?</p></li>
  <li><p>How is CSS styling directly and consistently linked to page performance? Specifically, page paint time.</p></li>
  </ul>
  
  <p><strong>Update: I've edited the question and examples based on two tests I just did:</strong></p>
  
  <ol>
  <li><p><em>Without</em> javascript enabled in my browser, the poor performance issue (surprisingly) is consistent.</p></li>
  <li><p>After removing the styling of the problematic area, the issue is <em>resolved</em> (But not quite, because now my page is ugly).</p></li>
  </ol>
  
  <hr>
  
  <h2>Issue with Page Paint Time</h2>
  
  <p>I've noticed that my webpage was performing poorly (laggy) at one specific area on the page.</p>
  
  <p>To study the issue, I enabled <code>show paint rectangles</code> and <code>enable continuous page repainting</code> in order to get some readings on the page repaint rate.</p>
  
  <p><a href="http://youtu.be/cavmhFdqYz8" rel="nofollow noreferrer"><strong>Here's a Youtube video that I took to demonstrate the issue.</strong></a></p>
  
  <p>Here's a healthy reading, in the area of my page that is responsive and smooth:</p>
  
  <p><img src="https://i.stack.imgur.com/UfAaB.jpg" alt="enter image description here"></p>
  
  <p>Here's an unhealthy reading (in the problematic area), where the page's responsiveness is slow and the scrolling is very laggy:</p>
  
  <p><img src="https://i.stack.imgur.com/C6ssE.jpg" alt="enter image description here"></p>
  
  <p>The page performs perfectly, with healthy repainting rates at the top (where the most activity is going on, actually), and performs terribly (nearly stops) at a lower area of the page. It returns to perfect performance when I scroll away from the problematic area.</p>
  
  <p><strong>Update:</strong> I completely disabled Javascript and got the same performance issue and readings as before.</p>