Trouble when using iPad

[satopian]

Thank you for developing a great app. I tried various things, but there is a problem that I could not solve.

iOS14. Problems with both Chrome and Safari.

• The screen is selected

• If i double-tap it, it will zoom. Also, it does not return to the original screen. Drawing cannot be continued. because it can only be operated in the zoom range.

I did some tests. for example….

<style>
div#chickenpaint-parent :not(input){
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>

The screen selection issue has been resolved. However, the problem of double tapping zooming the screen is more likely to occur.

touch-action: none; I applied this.

<style>
div#chickenpaint-parent :not(input){
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
touch-action: none;
}
</style>

Unintentional zooming with double taps no longer occurs, but 'post pic' and other icons stop responding. I don't have an iPad, so I found out from a report from a user on the Oekaki board that I had this problem. Report from a user whose language is English.

I've noticed when using Ipad+Apple pencil, Chickenpaint zooms in when double tapping on the "Misc" toolbar. This can make drawing quite cumbersome when you want to undo multiple strokes. The only way to unzoom is to either use pinch gestures on the toolbar or scroll to "Tool Options" and double tap there.

touch-action: none; Code that suppresses double taps with JavaScript instead.

    <style>
        div#chickenpaint-parent :not(input){
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }
    </style>
    <script>
        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
        var now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
        event.preventDefault();
        }
        lastTouchEnd = now;
        }, false);
    </script>

In this code, There are no unintended zoom issues. However, icons such as 'post pic' will stop responding.

In chickenpaint.css, touch-action is set in detail. Therefore, I think it's natural that the'post pic'icon becomes unresponsive with the method I tried. I couldn't find a solution.

[satopian]

I tried adding the following code to the HTML of the Paint screen of ChickenPaint.

<style>
:not(input),#chickenpaint-parent :not(input){
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
<script>
function load() {
document.addEventListener("dblclick", function(e){ e.preventDefault();}, { passive: false });
}
window.onload = load;
</script>

I don't know if this code is the best, but I was able to address the problem of double tap zooming on the iPad unintentionally and the screen being selected. However, this is just a patch in the HTML that runs ChickenPaint. So I was wondering whether to close it, but I left it open.

[thenickdude]

Thanks for the report, can you try my latest commit? I was only able to test it using an iOS simulator, but it should fix:

• Fix double-clicking elements on iOS would zoom page. Disable user zoom in <meta> tag to ensure initial page scale is 1x.
• Fix initial checked state of Full-Screen Mode main menu entry
• Prevent long-press from selecting host page text when full-screen on iOS Safari
• Fix palette dragging in iOS Safari didn't work
• Detect iPhone 12 Pro Max as "small screen" and default to full-screen mode

[satopian]

Thank you for your support. I can't build, so the test won't complete until I have a friend build it or I get a pre-built file. Also, please allow some time as we need to have iPad users test it. user-scalable=no I don't think it will affect the behavior, but this Meta tag I think it is invalid on iOS 10 or later. However, I've found that it contains code to address an issue where double-tap zoom happens unintentionally, so I'll give it a try. (I don't understand native English well, so I translated it on Google.)

[satopian]

If you can update the 'ChickenPaint example', the test is easy. All i have to do is ask the iPad user who was having the problem to try the 'ChickenPaint example'.

[thenickdude]

Okay, I've updated that now:

https://thenickdude.github.io/chickenpaint-example/

[gastronomical]

I gave it a try. Long presses still select text. I can’t seem to select any tools, create, or modify existing layers. The only thing I can do is draw with the pen tool and adjust slider settings (colour, brush and layer opacity, brush size, etc). Nothing else seems to work. Edit: came back to thee page 2 more times. Everything’s working fine now, and there’s no double tap zoom. Long holds still select text however.

[thenickdude]

Your browser might have cached the old version of the JavaScript or CSS. Please hold the shift key and click the browser's Refresh button.

Edit: Actually I only fixed "long press selects text" for the fullscreen mode, because I think to fix this requires page-wide CSS that could break other elements in the host page. I'll add instructions for mitigating this to the Readme.

[thenickdude]

I've pushed that new CSS to the example page now, so long-press problems should be gone now I think:

https://thenickdude.github.io/chickenpaint-example/

[gastronomical]

My mistake! I tried a few times with shift click and incognito mode, and the inoperable tools problem hasn’t returned. The latest version doesn’t have any long press problems either.

Cheers for the good work!

[satopian]

I had it tested in a community of users of drawing boards using ChickenPaint.

• "After rearranging layers etc., pressing the icon does not respond."
• "I can draw on the canvas."
• "Double tap zoom does not occur"

  uiElem.addEventListener("dblclick", function (e) {
    e.preventDefault();
  //   e.stopPropagation();
  }, { passive: false });

  This code is speculative, as it hasn't been tested by users who have a real iPad, but it's closer to the code that iPad users have rated as working properly. In the new iPad OS, passive: true is set as the default, so you must explicitly set it to passive: false. This may be wrong, but I think it's worth investigating. However, this code will be tested in the future, so the results are not yet known.

ChickenPaint example A test page that reflects the above code prepared for testing in our community.

ChickenPaint A successful example of patching HTML. p.s. I confirmed that it was updated further. Ask iPad users to try this ChickenPaint example with nothing changed.

[satopian]

i asked iPad users to try the updated "ChickenPaint example". The problem has been resolved. thank you.

[thenickdude]

This should be fixed in the new NPM 0.3.1 release now