Image is shifted when displayed in iPad-Pro in landscape mode, when using Babel transpiler

Questions
, , ,
1

Hi,

I have a script that loads an image using the TextureLoader and displays it as Sprite.
To fit the image in a given window while keeping the proportions, I set the viewport with the offset, and size so that the image fits in the GUI.
I found out that with an image size of 2160 x 3840 (width x height), the image is not always renderred properly in all devices.
In case of iPad-pro in landscape mode, the image is shifted (see figure1)
I placed a question in here with the details.
Because of the iPad version (<14) I have to transpile the code (using Babel)
I prepared 2 examples:

  • without transpile that shows the code - this example can be run on Chrome on e.g. Linux
  • and with transpile of the exact same code, that can run on iPad where the problem is observed.

I checked the image display in various devices and browsers (see the table below) The image is displayed ok all the devices (laptop, Macbook, Android mobile, iPhone8) but not in iPad-Pro. (for the laptop, and Macbook devices, the image displays ok (without shift) in the native orientation, and in emulation of landscape, and portrait mode (via Safari -> Develop -> Responsive Design Mode ))

Note that to run the example in Apple Device I needed to transpile the code using Babel.
I tested the example in iPad-Pro in multiple browsers (Chrome, Safari, and Firefox).

How can I fix or further debug this problem?
Thanks

table1 - running the example on multiple devices - iPad Pro in landscape orientation the image is shifted

image_shifted_on_ipad
image_shifted_on_ipad1277×974 168 KB

figure1 - image is shifted (indicated in red) when displayed in iPad Pro in landscape mode
image_shifted_in_landscape_orientation
image_shifted_in_landscape_orientation2732×2048 728 KB

2

I suggest you report browser specific issues always to the browser vendor. In this case, to Apple/WebKit. When doing so, it’s always a good idea to share a small test case (live example) at the bug report.

3

@Mugen87 thanks for your reply .
I solved the problem by upgrading iOS to 14.0.1. This solved the problem, and the image is no longer shifted.
It now displays properly in landscape and portrait orientations.

1 Like