Bug 179468 - Image rendered in smaller size and reports wrong dimension on iPad Pro
Summary: Image rendered in smaller size and reports wrong dimension on iPad Pro
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: iPhone / iPad iOS 13
: P2 Normal
Assignee: Nobody
URL: https://smartslider3.com/bugs/webkit/...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-11-09 00:28 PST by Roland Soos
Modified: 2020-04-22 02:43 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Roland Soos 2017-11-09 00:28:08 PST
Currently I can reproduce this issue on the latest iPad pro and in XCode simulator iPad PRO 2nd gen IOS 11.1

When you click on the imag ein the slider, it opens up a lightbox where you can change images with the next and previous arrow. After you change, the image size is very very small and there is no way to make it bigger. I have create a video which shows what is wrong: https://www.youtube.com/watch?v=y5GdbTpnz1A

On the console it also prints out the size of the image. 
In normal browser it prints:
5 times 1920 1080
2 times 1600 1200
3 times 1920 1080
2 times 1600 1200

On iPad pro:
        1920 1080
4 times 223 125
2 times 210 157
3 times 223 125
2 times 1600 1200

I have tried several different codes for image loading. In this example I use this one:
var $img = $('<img>', {'src': href, 'class': 'litebox-content'});
$this.transitionContent('image', $currentContent, $img);
$('img.litebox-content').n2imagesLoaded(function () {
   console.log($img[0].naturalWidth, $img[0].naturalHeight);
   $loader.remove();
});


If I change the code to the following it prints out the right image dimensions, but after the image appended into the DOM, then it renders incorrectly again.

                var img = new Image();
                img.onload = function () {
                    console.log($img[0].src);
                    console.log(this.width + 'x' + this.height);
                    $(img).appendTo($img);
                    $loader.remove();
                }
                img.src = href;
Comment 1 Radar WebKit Bug Importer 2017-11-09 07:19:35 PST
<rdar://problem/35441123>
Comment 2 Simon Fraser (smfr) 2017-11-09 07:19:49 PST
Please provide a URL where we can reproduce the issue.
Comment 3 Roland Soos 2017-11-09 07:20:48 PST
Ahh, sorry, I forgot it: https://smartslider3.com/bugs/webkit/reimink/index.htm
Comment 4 Simon Fraser (smfr) 2017-11-09 12:56:59 PST
Did this happen in iOS 10?
Comment 5 Roland Soos 2017-11-09 13:10:37 PST
(In reply to Simon Fraser (smfr) from comment #4)
> Did this happen in iOS 10?

I'm sorry, but I do not have IOS 10 device to try.

Simulator IOS 11.1:

iPad 5th gen      -> works
iPad Air          -> works
Iphone X          -> works
iPad Pro 12.9     -> works

iPad Air 2        -> fails
iPad Pro 9.7i     -> fails
iPad Pro 10.5     -> fails
iPad Pro 10.5     -> fails
iPad Pro 12.9 2nd -> fails
Comment 6 Roland Soos 2017-11-09 13:58:04 PST
I have just tried and it works fine in IOS 10.3 simulator's iPad PRO 12.9 2nd gen, so this bug probably came with IOS 11.
Comment 7 Simon Fraser (smfr) 2017-11-09 17:25:09 PST
I can reproduce on iPad Pro.
Comment 8 Alexey Proskuryakov 2019-03-08 15:20:38 PST
Roland, we cannot reproduce with current iOS any more. Can you please confirm?
Comment 9 Roland Soos 2019-03-09 01:20:17 PST
It still happens on iPad Pro 3nd gen IOS 12.1 simulator. See: https://youtu.be/lkgQw9zNkqI
Comment 10 Roland Soos 2020-04-22 02:42:52 PDT
Still happens on iPhone X IOS: 13.3.1

My assumption that it only happens on Retina 3x screens.