Mobile Web carousel image IOS choppy, webios

Mobile Web carousel image IOS choppy, webios

Before dinner, it was tested and said that the banner carousel would be choppy when it was sliding around manually. I think it's not scientific. How can a big fruit phone get stuck. I think the iPod is used in the test. I think it is probably because the performance of this gadget is not strong, but it will be stuck for 5 S later. What's interesting is that two 5 S, one IOS7 and one ios8. IOS7 is basically not choppy and ios8.

I borrowed my iPod from the test after dinner .... Start to solve this problem.

I have always thought that carousel should not have any problems, because I use Swipe, and there are more than 5000 stars. It should be more reliable. The middleware should recommend this library. It is suitable for use on mobile terminals. It is only 15 k without compress and comments, and supports unlimited carousel, manual sliding, and configuration items.

(You will find that there are not many items in the author's warehouse, and there is basically no start ...)

The usage is also very simple. The ReadMe on Github is enough. I will repeat it again:

HTML structure:

<div id='slider' class='swipe'>  <div class='swipe-wrap'>    <div></div>    <div></div>    <div></div>  </div></div>

CSS style:

.swipe {  overflow: hidden;  visibility: hidden;  position: relative;}.swipe-wrap {  overflow: hidden;  position: relative;}.swipe-wrap > div {  float:left;  width:100%;  position: relative;}

JavaScript code:

window.mySwipe = new Swipe(document.getElementById('slider'), {  startSlide: 2,  speed: 400,  auto: 3000,  continuous: true,  disableScroll: false,  stopPropagation: false,  callback: function(index, elem) {},  transitionEnd: function(index, elem) {}});

 

Okay. Continue with the choppy video just now, and Google hasn't made Google a bonus. You still have to go to Github to check out the project's issue. There are already more than 300 issue .. Since there is a choppy video in IOS, there are still a lot of keywords to be filtered by IOS. One by one looks like English.

After a long viewing (in fact, it will take several minutes ....), This is found:

iOS hardware acceleration trigger fix (CSS) 
Addition of -webkit-perspective and -webkit-backface-visibility on container element in order to trigger hardware acceleration in iOS6. This is a fix since translate3d no longer triggers hardware acceleration in iOS6 Safari.

Then I added it to css with a try attitude:

.swipe {  overflow: hidden;  visibility: hidden;  position: relative;}.swipe-wrap {  overflow: hidden;  position: relative;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;   -webkit-transform-style: preserve-3d;  transform-style: preserve-3d;}.swipe-wrap > div {  float:left;  width:100%;  position: relative;}

After adding it, You can only say that it cannot be silky !!!!! Issue mentioned IOS6. In fact, I want to say that IOS7 and ios8.

 

I didn't have a deep understanding of hardware acceleration before, and I only knew the hack of translateZ (0). Today I only know the perspective and backface-visibility. In fact, there is a translate method in the SwipeJS library, which contains the following sentence:

style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';style.transform = 'translateX(' + dist + 'px)';

We can see that the hack translateZ is used for the old system, but it is not used for the new system. Maybe the author thinks the new system can run smoothly. I just changed the following:

 style.webkitTransform =  style.transform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';

However, there is nothing to do with it. It is still effective when perspective and backface-visibility are added.

In addition, the above issue is 12 years old !!! The author mentioned the pr and merge, but the attributes perspective and backface-visibility are not found in the latest CSS code, maybe the author thinks the current machine is smooth enough.

 

It's easy to change the bug. Here's a summary:

Hardware acceleration is really useful, and you can enable it in more than translateZ.

If you have any questions about using open-source files, check issue.

 

Finally, let me explain that the perspective and backface-visibility attributes mentioned earlier are very useful. If you find a flickering phenomenon in the transform or transition process, add them to the page for a try. For more information, see here.