title: Fade In/Out on Scroll Not Working In Safari
body: <p>I have the below code that fades images in as you scroll down and fades them out when you scroll up:</p>
  
  <pre><code>&lt;script&gt;
  
  jQuery(window).on("load",function() {
    jQuery(window).scroll(function() {
      var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight();
      jQuery(".lookbook").each(function() {
        /* Check the location of each desired element */
        var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight();
  
        /* If the element is completely within bounds of the window, fade it in */
        if (objectTop -500 &lt; windowBottom) { //object comes into view (scrolling down)
          if (jQuery(this).css("opacity")==0.4) {jQuery(this).fadeTo(1500,1.0);}
       } else { //object goes out of view (scrolling up)
          if (jQuery(this).css("opacity")==1.0) {jQuery(this).fadeTo(1500,0.4);}
        } 
      });
    }).scroll(); //invoke scroll-handler on page-load
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  .lookbook {opacity:0.4;}
  &lt;/style&gt;
  </code></pre>
  
  <p>This works fine when I test it in Chrome and Firefox but not in Safari.  For some reason if I change the opacity to 0 it will work in Safari i.e.</p>
  
  <pre><code>&lt;script&gt;
  
  jQuery(window).on("load",function() {
    jQuery(window).scroll(function() {
      var windowBottom = jQuery(this).scrollTop() + jQuery(this).innerHeight();
      jQuery(".lookbook").each(function() {
        /* Check the location of each desired element */
        var objectTop = jQuery(this).offset().top + jQuery(this).outerHeight();
  
        /* If the element is completely within bounds of the window, fade it in */
        if (objectTop -500 &lt; windowBottom) { //object comes into view (scrolling down)
          if (jQuery(this).css("opacity")==0) {jQuery(this).fadeTo(1500,1.0);}
       } else { //object goes out of view (scrolling up)
          if (jQuery(this).css("opacity")==1.0) {jQuery(this).fadeTo(1500,0);}
        } 
      });
    }).scroll(); //invoke scroll-handler on page-load
  });
  &lt;/script&gt;
  
  &lt;style&gt;
  .lookbook {opacity:0;}
  &lt;/style&gt;
  </code></pre>
  
  <p>Any ideas why this isn't working in Safari when I set the opacity to 0.4?</p>
  
  <p>I was testing in Safari 10.1.2.</p>