sweet-scroll Page disappears in Chrome v67

Some parts or sometimes the whole page disappears after rendering. We have this problem in the most of our projects, for example: https://www.avocom.be/. The whole page is white, but when you scroll, it appears again.

It is possible that you do will not see the issue the first time you visit the website. I suggest you to navigate to another page, move you pointer on the menu items and hover, refresh, repeat this until you see the problem. You should see the problem after a few times.

This issue is only visible in Chrome. We found out that it started from version 67.0.3396.87 (Official Build) (64-bit). I already did a bug report to Chrome. In the previous version of Chrome (66.0.3359.181 (Official Build) (64-bit)), the issue did not exist.

We found out that when we stop using Sweet scroll the issue is solved.

Wrong rendering

Correct rendering

Wrong rendering

Correct rendering

Jun 20 '18 07:06 Katrienvh

I just removed sweet scroll from the example above (https://www.avocom.be/), so you can not see the issue anymore

Jun 25 '18 07:06 Katrienvh

I can also confirm that this issue is happening on chrome and after refreshing (Not on first load usually) Hope it will get resolved soon. Here is a page where the issue occurs: https://www.kilroy.dk/kontakt-os

Jun 26 '18 11:06 ramiejleh

@tsuyoshiwada I have also faced the same problem. Three weeks ago, I noticed it and just removed SweetScroll for workaround. The issue occurs when SweetScroll insert a temporary div element to body and immediately remove it to check whether the page can scroll or not.

Jun 28 '18 01:06 h6ah4i

I have just created a patched version of SweetScroll. It uses different approach to find a scrollable element. It should work properly in most of cases, but might cause some incompatibility issues (*1).

You can try it, but AT YOUR OWN RISK 😜

https://github.com/h6ah4i/sweet-scroll/tree/feature/stop-using-temporary-div-to-detect-scrollable

package.json

{
  "dependencies": {
    "sweet-scroll": "h6ah4i/sweet-scroll#feature\/stop-using-temporary-div-to-detect-scrollable"
  }
}

*1: Current implementation assumes <body> element is always scrollable

Jun 28 '18 08:06 h6ah4i

@h6ah4i Your solution almost works. But it breaks the plugin on safari/ios devices.

Jul 09 '18 08:07 ramiejleh

@ramiejleh Thanks for the report. I'll take it a look 👀

Jul 18 '18 01:07 h6ah4i

@ramiejleh Sorry for the very late reply. I have now fixed the compatibility issue with Safari/Edge browsers.

Oct 05 '18 02:10 h6ah4i