title: Leaflet with position:fixed leaves gray trail after scrolling
body: <p>I'm trying to make site containing two divs:</p>
  
  <ul>
  <li>left, Y-scrollable with content</li>
  <li>right, not moving (position fixed), containing just a label and leaflet map</li>
  </ul>
  
  <p>When I am scrolling the page, leaflet leaves gray trail, which I want to get rid of. </p>
  
  <p>All I have found here (at stackoverflow) is <strong>map.invalidateSize()</strong>, but it did not help me.</p>
  
  <p><a href="http://jsfiddle.net/ZSM49/3/" rel="nofollow">Watch full jsfiddle example here</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="map"&gt;      
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  Heres the text&lt;br /&gt;
      ...
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body, #map {
      width: 100%;
      height: 100%;
  }
  #map{
      width: 400px; 
      height: 400px; 
  
      position: fixed; 
      left: 60%; 
      top: 30%;   
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    // create a map in the "map" div, set the view to a given place and zoom
      var map = L.map('map').setView([51.505, -0.09], 13);
  
      // add an OpenStreetMap tile layer
      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&amp;copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
      }).addTo(map);
  
      window.map = map;
  
  $(document).ready(function(){
      $(window).scroll(function(){
          window.map.invalidateSize();
      })
  })
  </code></pre>