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?
table1 - running the example on multiple devices - iPad Pro in landscape orientation the image is shifted
figure1 - image is shifted (indicated in red) when displayed in iPad Pro in landscape mode