Question

I’ve been looking at using a script I’ve found online (here) as a basis for a website I’m looking to create. It has an issue in Chrome in that the page wont scroll once a link is clicked, however if I resize the window just a tiny bit the page “repaints” – I think this is the right term – and all is well again.

Is there anyway to do a repaint like this? I don’t mean refresh :)! Sorry if this seems a bit vauge, if you try this link in chrome, press one of the links in the header and you’ll see the problem when trying to then scroll.

Initially I’m thinking there might be some javascript I can call at the end of switching pages that repaints the page.

Thanks

Answer 1

You could try doing something like this after the slide has completely transitioned to a new page:

Since you’ve commented that it didn’t work as I originally suggested, here’s a way to “encourage” Chrome to do the hide/display trick:

$(".slide.loaded.prev").css("display", "none");
setTimeout(function() {
    $(".slide.loaded.prev").css("display","");
});

or you could try this:

var slide=$(".slide.loaded.prev");
slide.css("display", "none").height();  // just get the height to trigger a relayout.
slide.css("display", "");

The above code simply finds the previously visible slide, sets the CSS property display to none (hiding it completely) and then removes it. This trick worked when using the Chrome developer tools.

It appears that the scroll bar is for the previous “slide” in Chrome. By toggling the display of the slide briefly, the scrollbar is hidden under the now current “slide’s” content.