Some time back I was implementing a functionality for Firefox browsers on Android devices and I found a strange problem - For Firefox > 18 on Android devices if I move an element using CSS3 Transformations inside a parent container with overflow:hidden, then part of the element being moved is displayed outside the overflowed region. It seems like when you move the element it just discards the overflow:hidden property and everything is revealed rather. Normally the content outside overflow:hidden should be cut off from view.
I have a simple demo http://rialab.jbk404.site50.net/ffandroidissue/ - an image which is bigger than the container div is moved using CSS3 Transformations. The div has a overflow:hidden set to it. There are two buttons. Click on them to see the various results. The first button causes the issue whereas the second button resolves it.
So this is what causes the issue – moving the image using CSS3 Transformations (for eg. transform:translateX(value);) inside a container with overflow:hidden
And this is what solves it – strange !!
Adding a background color and an opacity to the container element like this,
Check out the demo in Firefox on an Android device. I am not sure if anybody has encountered this situation. But this definitely seems to be a bug in Firefox for Android’s. This is not seen for other browsers.
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. I observed the flickering mostly in iOS devices – iPhone, iPod touch and iPad’s.
After a lot of head scratching and looking around in forums I finally got a solution. One of the guys (he is divine for me now) in StackOverflow suggested to add two lines of CSS to all the elements that moved using CSS3 transition. I tried it out and guess what, it worked!. I just added two lines to the CSS style for the images. This is what solved it,
#wrapper ul li img
Add this style block to the CSS file and the issue will be a gonner. The link to the fixed demo is below (I have merged the fix with the original demo. So there is no separate demo). Check out in an iOS device’s browser. Note that the demo’s run in an Android browser as well. But I observed the flickering in iOS devices only.
Also try removing the above CSS lines and checking out the demo again. You will notice flickering.
1) Images linked to URL - Now you can click or tap on the images to go to a URL. I have made a new post which describes the changes made. This was requested by one of the reader. I felt the importance of having the ability to link the images to URL so came up with an extension of this post. You can fine the post here. There is a demo and also a download link.
3)Circular swipe gesture gallery – I have a new tutorial where I have talked about a circular swipeable gallery. So the images keep on looping. The tutorial also includes a new demo. Read it here.
4) Auto scrolling gesture gallery - Sometimes users may want a auto scrolling gallery along with the normal swipe gesture feature. I have a new post with a demo. Read it here.