I created a page using Fotorama 4. The code is as below:
<div class="fotorama" data-fit="contain" data-height="97%" data-width="100%" data-ratio="600/923">
<img src="images/img1.png" data-caption="Caption 1">
<img src="images/img2.png" data-caption="Caption 2">
<img src="images/img3.png" data-caption="Caption 3">
<img src="images/img4.png" data-caption="Caption 3">
</div>
The image slideshow is shown correctly in most browsers, except for Samsung's Android default browsers (Mobile Google Chrome works fine). We cross-checked with the following devices:
Display Error 1:
- Samsung Galaxy Note 1 ( Android OS 4.0.4 )
- Samsung Galaxy Note 2 ( Android OS 4.1.2 )
- Samsung Galaxy S2 ( Android OS 4.0.4 )
Display Error 2:
- Apple iPad 2 ( iOS 4.3.5 )
Display Okay:
- LG Optimus 3D ( Android OS 2.2 )
- Apple iPhone 4 ( iOS 6.1.3 )
- Apple iPhone 5 ( iOS 6.1.4 )
- Sony Xperia Z Tablet ( Android OS 4.1 )
- Samsung Galaxy S3 ( info given by @DeveloperCoder )
For Display Error 1, the 3rd & 4th image cannot be shown (probably due to load-on-demand does not trigger when swipe).
For Display Error 2, the animation is laggy. (this question focuses on Display Error 1)
Is there any workaround ?
Here is the cross-link of bug report in GitHub.
Hint given by Fotorama 4 author: Adding #quirks
at the back of URL temporarily solved the problem.