Recently, I encountered a seemingly very simple bug, but it is also relatively simple to deal with. Without suspense, LET’s get to the topic:

Framework7 +react write a singlePage, IOS Safari, wechat built-in browser, Google chrome, QQ browser and other third-party browser display normal;

Only QQ built-in browser has an unforeseen bug: when sliding down/up quickly, the page will appear blank, and the content will be displayed after sliding; Android doesn’t have this problem.

I added -webkit-overflow-scrolling:touch because I wanted the scrolling to look the same as it did in its native form. Increase the effect of inertia sliding, page sliding also like the native instant smooth, ha ha;

Scrolling for -webkit-overflow-scrolling:touch (webkit-overflow-scrolling:touch) When I was desperate to communicate with the product, I found a solution by accident and deliberately shared it:

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
Copy the code

Add the above CSS to the parent of the sliding range, you can solve the problem;

To express my own opinion: Baidu is not omnipotent, occasionally Google, can also discover the new continent…