[Webkit-unassigned] [Bug 179468] New: Image rendered in smaller size and reports wrong dimension on iPad PRO

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=179468

            Bug ID: 179468
           Summary: Image rendered in smaller size and reports wrong
                    dimension on iPad PRO
           Product: WebKit
           Version: Safari 11
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: roland at nextendweb.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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;

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20171109/b7f39396/attachment-0001.html>