Background color change transition not working on Safari

[kgbeast]

I have a little bit of javascript code that changes the background color based on the distance scrolled.

However, it doesn’t seem to be working for Safari based devices like mac, ipads and iphones. Could someone take a look and help me out a bit?
The code in question is:

 $(document).ready(function() {


$(window).on("scroll touchmove", function() {
    console.log($(document).scrollTop());
        if ($(document).scrollTop() >= 1275) {
                $('body').css('background-color', $("#one").attr("data-color"));
                $('.slidetext').addClass('white');
        };
        if ($(document).scrollTop() > 1897) {
                $('body').css('background-color', $("#two").attr("data-color"))

        };
});
}); 

I also have this CSS for the body tag.

html, body{
    height: 100%;
    -webkit-font-smoothing: antialiased;
      transition: all 800ms;
         -webkit-transition: all 800ms;
         will-change: background;
      background: #FFF;


}

Also, I’ve set a small pattern as a background on a section using repeat and the following css

    background-color: #020005;
    background-image: url(..//assets/black-thread.png);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: top left;
    -webkit-background-size: auto, cover;
    -moz-background-size: auto, cover;
    -o-background-size: auto, cover;
    background-size: auto, cover;

The image for some reason doesn’t appear on a lot of devices.

Any help with the above issues would greatly be appreciated.

[Beverleyh]

An actual demo would be useful – its unlikely that anyone will build a test page for you.

You may need to provide a hosted standalone page because coding playgrounds like JSFiddle and CodePen sometimes behave unexpectedly with full page scroll demos. You can try a CodePen first though.

The image for some reason doesn’t appear on a lot of devices.

Might have something to do with the double-slash in your url background-image: url(..//assets/black-thread.png);

[Author]

Posts