Fade In/Out on Scroll Not Working In Safari

Question

I have the below code that fades images in as you scroll down and fades them out when you scroll up:

<script>

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 < 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
});
</script>

<style>
.lookbook {opacity:0.4;}
</style>

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.

<script>

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 < 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
});
</script>

<style>
.lookbook {opacity:0;}
</style>

Any ideas why this isn't working in Safari when I set the opacity to 0.4?

I was testing in Safari 10.1.2.

Answer 1

Just a suggestion here: why do not check for a class being present on your object and you define bot classes. if you do it, you could ensure your class has cross-browsing capabilities for this opacity prop. Check this https://css-tricks.com/snippets/css/cross-browser-opacity/ ... if you do it... you could have:

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

  /* IE 5-7 */
  filter: alpha(opacity=40);

  /* Netscape */
  -moz-opacity: 0.4;

  /* Safari 1.x */
  -khtml-opacity: 0.4;

  /* Good browsers */
  opacity: 0.4;
} 

.visible_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  /* IE 5-7 */
  filter: alpha(opacity=100);

  /* Netscape */
  -moz-opacity: 1.0;

  /* Safari 1.x */
  -khtml-opacity: 1.0;

  /* Good browsers */
  opacity: 1.0;
} 

And your JS code may check the class being present, instead of having a prop.

if (jQuery(this).hasClass("transparent_class")) {jQuery(this).addClass("visible_class", 1500).removeClass("transparent_class");}

Hope this works for you.