Scrolling DIV and Canvas flicker on iPhone/iPad touch

A website has been being optimized recently. We have made many changes to make it better for users on mobile devices, including replacing all Flash and Silverlight controls with HTML5, and add some events for the touch screen. In the next article, I will introduce some tips for touch screen development.

The default scroll bar of the DIV element disappears on the iPhone and iPad. In fact, this is not a problem of code or CSS. Apple hides all the scroll bars on its system by default. Of course, this also includes HTML elements. On an Apple device, the default behavior is that when a user touches and slides the screen, if the elements in the device support the scroll bar and the scroll bar is available, the scroll bar is displayed immediately and the sliding is supported. By default, the scroll bar is not displayed. Here are two articles about how to add a scroll bar to a DIV on an Apple device.

Http://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html

Http://cubiq.org/scrolling-div-on-iphone-ipod-touch

Several key CSS styles:

In addition, if a Canvas object is dynamically generated on the page on the Apple device and can respond to the touch event, it will flash inexplicably when you click with your fingers and slide over the Canvas, to solve this problem, you only need to add the following style to the Canvas object: