There seems to be an issue with my JavaScript script that displays an image with a resolution of 2160 x 3840. When viewed on an iPad Pro in landscape mode, the image appears shifted down. You can see the problem demonstrated in the code example here.
I've tested the image display on various devices and browsers as shown in the table below. The image appears correctly on all devices including laptops, MacBooks, Android mobile phones, and iPhone 8, except for the iPad Pro. Interestingly, the image displays correctly on laptops and MacBooks in both portrait and landscape modes using Safari's Responsive Design Mode.
It's worth noting that in order to run the example on an Apple device, I had to transpile the code using Babel. When testing the example on an iPad Pro in different browsers (Chrome, Safari, and Firefox), the transpiled image is shifted (see figure1), whereas the same transpiled code runs fine on iPhone 8 (see figure2).
I am looking for recommendations on how to fix this issue or troubleshoot it further. Any help would be appreciated.
https://i.sstatic.net/qNoKc.png https://i.sstatic.net/Xoank.jpg https://i.sstatic.net/7PGsn.jpg
<!DOCTYPE html>
<html>
<head>
<!-- ############################ -->
<!-- using jsdelivr, with transpile -->
<!-- NOT OK - image is shifted -->
<!-- ############################ -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Construction Overlay App">
<meta name="author" content="Avner M.">
<!-- <meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' blob: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
-->
<title>With transpile landscape image shifted</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f399828696818ab3c1ddc1ddc3">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="66120907151214265448574852">[email protected]</a>/build/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/avnermosh/example12_ipad_landscape_image_not_centered_properly@master/example12_style.css">
</head>
<body>
<div id="grid-container1"></div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2c3b393b303b2c3f2a312c732c2b302a37333b1e6e706f6d706f">[email protected]</a>/runtime.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/avnermosh/example12_ipad_landscape_image_not_centered_properly@master/build/bundle2.js"></script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91e5fef0e2e5e3d1a3bfa0bfa5">[email protected]</a>/build/toastr.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</body>
</html>