Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5– flickering issue fixedA post from my blog: http://jbkf...
Upcoming SlideShare
Loading in …5
×

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – flickering issue fixed

1,405 views

Published on

The swipe gesture image gallery that we talked about in one of the earlier post had a strange flickering issue. There was a slight flickering of the image that was being swiped along with the movement of finger. This was happening only for the first time i.e when all the images are being swiped for the first time. From the next time on wards I did not see the issue. Check out the full blog post: http://jbkflex.wordpress.com/2012/02/16/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-flickering-issue-fixed/

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,405
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5 – flickering issue fixed

  1. 1. Replicating the Swipe Gesture iPhone Gallery for mobile web– HTML5– flickering issue fixedA post from my blog: http://jbkflex.wordpress.com/2012/02/16/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-flickering-issue-fixed/The swipe gesture image gallery that we talked about in one of the earlier post had a strange flickering issue. Therewas a slight flickering of the image that was being swiped along with the movement of finger. This was happeningonly for the first time i.e when all the images are being swiped for the first time. From the next time on wards I did notsee the issue. Here is the link to the demo example that I created in my earlierpost:http://jbk404.site50.net/html5/mobile/swipey/mobile_version/. Check it out in an iPhone or an iPod (open it inmobile safari browser)and you would notice the flickering issue. I used CSS3 transitions and transformations to movethe images and those were actually causing the issue. But I could not find a solution for it.After a lot of head scratching and looking around in forums I finally could solve the issue. One of the guys (he isdivine for me now) in StackOverflow suggested to add two lines of CSS to all the elements that moved using CSS3transition. I tried it out and guess what, it worked!. I just added two lines to the CSS style for the images. This is whatsolved it,#wrapper ul li img{ -webkit-backface-visibility: hidden; -webkit-perspective: 1000;}Add this style block to the CSS file and the issue will be a gonner. The link to the fixed demo is below. Open it up iniPhone or iPod browser,http://jbk404.site50.net/html5/mobile/swipey/mobile_version/fix/

×