3

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.

Raptor
  • 53,206
  • 45
  • 230
  • 366

0 Answers0