0

I am developing a website: http://www.techniquetolife.com It's basically a div 5x as big as the window inside window sized div, with other divs within the large div, using the overscroll and scrollTo plugins to navigate.

The website works perfectly fine in Safari and Firefox for OS/X. But I am having serious trouble making it work in Chrome. I'm not sure if it's an Chrome OS/X only problem, but whenever I scroll over one of the inner divs within the large div, the whole browser slows down, this only happens in Chrome...

If I disable overscroll and use the scrollbars it works 100% fine, but I really want to use the overscroll drag to scroll plugin.

I am no good at coding so any help would be greatly appreciated.

All of the plugins / browsers are on the latest version.

user2014848
  • 1
  • 1
  • 3

1 Answers1

1

Okay, well I posted an answer to a similar question that I think this might be related too. I could be wrong though, but you could test it.

See the full question and my full answer here: Chrome slow scrolling with fixed position elements

Problem and How to Monitor It

The reason for this is because Chrome for some reasons decides it needs to redecode and resize any images when a fixed panel goes over it. You can see this particularly well with

► Right Click Page -> Inspect Element -> Timeline -> Frames

► Hit Record on bottom

► Go back to the page and drag scrollbar up and down

This seems to just be a problem with the method Chrome is using to determine if a lower element needs to be repainted.

To make matters worse, you can't even get around the issue by creating a div above a scrollable div to avoid using the position:fixed attribute. This will actually cause the same effect. Pretty much Chrome says if anything on the page has to be drawn over an image (even in an iframe, div or whatever it might be), repaint that image. So despite what div/frame you are scrolling it, the problem persists.

The Easy Hack Solution

But I did find one hack to get around this issue that seems to have no downside as of now. By adding 

-webkit-transform: translateZ(0);

To your fixed panel, putting that div in its own compositing layer.

Community
  • 1
  • 1
corylulu
  • 3,449
  • 1
  • 19
  • 35
  • 1
    I'm amazed about this answer. I was struggling with dragging an added image bigger than screen. The idea is let the user drag a map after zoom-in it, but only in Chrome the image disappear when drag is into some sort of random coordinates. After check all the calculated values I considered a render issue, then I tried this approach, I added -webkit-transform: translateZ(0) to the image and the problem looks solved. I know my issue isn't related to this post but the answer was usefull to me. Many thanks! – Cosmitar Dec 09 '14 at 15:09