Choppy scrolling with "background-attachment: fixed"
<p>I'm having issues with background-attachment: fixed. When I apply it to the elements on my page it creates a very choppy scrolling effect. Essentially not something that is not a good experience for the user.</p>

<p>My code is here:</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="con row1"&gt;
&lt;p&gt;Some text here just to flesh out example&lt;/p&gt;
&lt;/div&gt;

&lt;div class="grad-space"&gt;
&lt;/div&gt;

&lt;div class="con row2"&gt;
&lt;p&gt;Some text here just to flesh out example&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.con {
height: 100vh; }

.grad-space {
 height: 50vh; }

.row1 {
background: url('https://s-media-cache-    ak0.pinimg.com/736x/3d/88/09/3d880927ac8bfec60a04ca93064569e0.jpg') no-repeat center;
background-size: cover;
background-attachment: fixed; }

.row2 {
background:   url('https://d3rt1990lpmkn.cloudfront.net/640/31762579d8fd04a756fb791ac9c3634b5828f0dd') no-repeat center;
background-size: cover;
background-attachment: fixed; }
</code></pre>

<p>Here's a link to the codepen showing exactly what I'm talking about:
<a href="http://codepen.io/reskk/pen/qaYJwq" rel="nofollow">http://codepen.io/reskk/pen/qaYJwq</a></p>

<p>Edit: Fullpage Codepen: <a href="http://codepen.io/reskk/full/qaYJwq/" rel="nofollow">http://codepen.io/reskk/full/qaYJwq/</a></p>

<p>Now strangely enough when I resize the browser down to a small width (say 800px) the scrolling actually becomes very smooth - just as you'd want it to appear on a finished project.</p>

<p>When the browser is at its max width (and max height, which you can't quite fully get on codepen due to to the code-input box) that is where the janky, choppy scrolling happens. </p>

<p>I've done extensive searching on this and haven't been able to find a solution.</p>

<p>Does anyone have any ideas on this? It's such a gorgeous effect but is unfortunately made useless by the performance it yields.</p>

<p>Thanks,</p>

<p>Reskk</p>