CODEWITHSUNDEEP
javascriptjqueryscrollsafari
pessimo
pessimo

Reputation: 97

Safari scroll glitch

I am working on a terminal-like UI for a website where content is added with a typewriter effect (using typed js). the content is always added at the bottom of the page, the height of which changes constantly and, to keep the user always on the news information, I automated the scroll-to-bottom like this:

        var h = 0;
        window.setInterval(function(){
            if ($(document).outerHeight() != h){
                $(document).scrollTop( $(document).outerHeight() );
                h = $(document).outerHeight();
            }
        }, 10);

The code works, but I always get a glitch in Safari, where, after an image is loaded the automated scroll becomes all glitchy and unresponsive. I think it might has to do with the height of images not integrated in the height of a div, but honestly, I don't know. the thing works perfectly on all other browsers. Has this kind of glitch ever occurred to any of you? Do you know what causes it?

I uploaded a demo of the page here

Thank you all.

Upvotes: 3

Views: 494

Answers (1)

Fraser Crosbie
Fraser Crosbie

Reputation: 1762

From what I can see while looking at the dev tools and the typed.js source code, the entire typed div is replaced for each new character added (typed):

(self.el.html(nextString);).

This causes the images to be reloaded over and over. Have a look at the network panel in your dev tools to see all the images loading again and again. This is not ideal at all.

One option you have is to set a width and height on your images in css or add the width and height to the html tag. This will solve your scrolling issue. But the images will still flicker as they load each time.

Your best option would be to modify the typed code to append each character and each image to the parent element, instead of replacing its contents each time.

Upvotes: 1

Related Questions