Aspect ratio is broken when iPad is turned from landscape to portrait in full screen mode

[satopian]

i don't have an ipad but,I have a drawing site. Some users of that site are iPad users. This is probably an issue that only occurs on iPads or iPhones. I have the following problem:

1. Change iPad from landscape to portrait orientation. Or change from portrait to landscape. Then, the aspect ratio of the image on the drawing screen will change. At that time, the position of the pen tip of ApplePencil and the coordinates of the line appearing on the screen are greatly misaligned. I don't have an actual iPad, so it's just a guess, but it's the same behavior as when the specified width and height of the Canvas tag are not set as intended. Even if the aspect ratio changes, if he send an image to SERVER, he can receive an image that matches the original Canvas aspect ratio. In other words, the aspect ratio of the data does not change even if there is a problem with the display. Data is received normally.
2. Change iPad from landscape to portrait orientation. Or change from portrait to landscape. Then, the layer palette etc. will become too long vertically and he will not be able to press the new layer button etc. The position of the palette may be off-screen.
3. This issue only occurs in ChickenPaint's fullscreen mode. I asked an iPad user to check out the ChickenPaint example site. The problem only occurs in fullscreen mode. However, when I use Chrome's developer tools on Windows to emulate an iPad, I don't have this problem. I need to investigate using a real iPad or other emulator, but I don't have that environment. However, i can ask the user who reported this issue if the issue has been fixed.

An example of the problem that the vertical length of the vertically long canvas is displayed short.

Turn this iPad from portrait to landscape. From horizontal to vertical. Another example of the problem that when repeatedly turning to landscape, the aspect ratio of the canvas collapses and it becomes longer horizontally.

An example where the layer palette is longer than the screen size of the device, making it impossible to perform operations such as creating new layers.

The version of the device experiencing the issue. iPadOS version 16. chrome version 111.0.5563.101

https://paintbbs.sakura.ne.jp/cgi/neosample/support/potiboard.php?res=643 It is written in Japanese. But there are more sample images than this issue.

[satopian]

jquery - Mobile Safari $(window).height() URL bar discrepancy - Stack Overflow

js/gui/CPMainGUI.js

    this.resize = function() {
        let
            newHeight;

        let
            // windowHeight = $(window).height(),
            windowHeight = window.innerHeight,
            menuBarHeight = $(menuBar.getElement()).outerHeight();

        if (fullScreenMode) {
            newHeight = windowHeight - menuBarHeight;
        } else {
            newHeight = Math.min(Math.max((windowHeight - menuBarHeight - 65), 500), 850);
        }

        canvas.resize(newHeight, false);
        that.constrainPalettes();
    };

$(window).height()>window. innerHeight I tried rewriting to. This is because there was information that $(window).height() could not get the height as intended on iPadOS.

This fix no longer causes the layer palette to become too long vertically, preventing new layers from being created. However, when iPad user change the iPad orientation from portrait to landscape or landscape to portrait in full screen mode, the image drawn on the canvas loses its aspect ratio and the pen coordinates do not match. The problem still occurs as it did before the fix.

When this problem occurs, once you switch from full screen to mini screen and then change to full screen mode again, the problem that occurred will disappear.

<canvas data-cursor="default" width="753" height="800px" class="chickenpaint-canvas" touch-action="none" style="height: 950px;"></canvas>

For example, if i change the height of the canvas from 950px to 800px like the above code, the aspect ratio of the drawing part of the canvas will change.

this.resize = function (height, skipCenter) {
    // Leave room for the bottom scrollbar
    height -= (0, _jquery.default)(canvasContainerBottom).outerHeight();
    (0, _jquery.default)(canvas).css('height', height + "px");
    canvas.width = (0, _jquery.default)(canvas).width();
    canvas.height = height-300;
    canvasClientRect = null;

    if (!skipCenter) {
      centerCanvas();
    } // Interpolation property gets reset when canvas resizes

    this.setInterpolation(interpolation);
    this.repaintAll();
  };

canvas.height = height-300;

Probably, changing the canvas size as shown in the above code can reproduce a very similar phenomenon to the iPad user facing the problem. The drawing screen is vertically shortened, and the Apple Pencil pen coordinates do not match the screen. Switching the iPad from portrait to landscape or landscape to portrait using ChickenPaint in full screen mode seems to have a very similar issue.

I fixed what I found and asked an iPad user to check it, but that's about all I can do. Also, unfortunately, I'm not sure if the fix I did was correct... I would be very grateful if you could solve this problem.

[satopian]

I was able to identify the cause of the problem when using FullScreen mode + iPad.

/* Full screen mode */
.chickenpaint.chickenpaint-full-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color:white;
    z-index:1000;

    -webkit-touch-callout: initial;
}

Remove all this CSS. That way you won't have the aspect ratio issue you were reporting. I tried replacing this part with another CSS. No problems occurred. However, this issue only occurs on iPad and iPhone, and probably not on android. I've made a pull request for the rewritten CSS.

https://github.com/thenickdude/chickenpaint/pull/52