Scrollview won't scroll on touch devices

x-0D commented 7 months ago

I'm trying explore haxeui examples, responsive ui example. It's works OK, but i have some problems with viewing it on mobile. when i try to scroll, it scrolls a bit and then refuses to scroll. you can see transpiled example here: https://haxeresponsiveui.appleroot.repl.co/

Expected Behavior

Scrolling works on touch devices

Current Behavior

It won't work

Possible Solution

Use Native Scrolls instead of custom implementation.

Steps to Reproduce (for bugs)

build this example: https://github.com/haxeui/component-examples/tree/original/responsive
open it on mobile
see bugs with responsive ui, add <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> into head of html file
open it again on mobile, try to scroll.

Media

Test app / minimal test case

<scrollview width="100%" height="100%" contentWidth="100%" style="border-size:0;background-color: white;">
    <vbox id="main" width="100%" style="padding: 5px;">
        <style source="main.css" />

        <script>
            main.registerEvent("resize", function() {
                headerLabel.text = "Responsive Example - (" + main.width + "x" + main.height + ")";
            });
        </script>

        <box styleName="header" width="100%">
            <label id="headerLabel" text="Responsive Example" verticalAlign="center" />
            <image id="logo" verticalAlign="center" horizontalAlign="right" />
        </box>

        <hbox width="100%" continuous="true">
            <vbox styleName="menu">
                <box><label text="Menu Item 1" /></box>
                <box><label text="Menu Item 2" /></box>
                <box><label text="Menu Item 3" /></box>
                <box><label text="Menu Item 4" /></box>
                <box><label text="Menu Item 5" /></box>
            </vbox>

            <vbox styleName="content" width="100%">
                <box width="100%">
                    <label id="small" text="size < 500px" />
                    <label id="medium" text="size >= 500px && size <= 800px" />
                    <label id="large" text="size > 800px" />
                    <label id="html5" text="backend: haxeui-html" horizontalAlign="right" />
                    <label id="hxwidgets" text="backend: haxeui-hxwidgets" horizontalAlign="right" />
                </box>

                <vbox width="100%">
                    <hbox width="100%">
                        <button text="Button" width="50%" />
                        <button text="Button" width="50%" />
                    </hbox>
                    <button text="Button" width="100%" />
                    <hbox width="100%">
                        <button text="Button" width="33%" />
                        <button text="Button" width="34%" />
                        <button text="Button" width="33%" />
                    </hbox>
                </vbox>

                <label id="lorem1" width="100%" text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lacinia, ipsum id egestas pulvinar, ex metus ultricies lacus, vitae blandit urna sapien id ex. Curabitur finibus tempor ex, et pulvinar nunc interdum egestas. Proin dapibus tincidunt massa eget efficitur. Mauris sagittis non ante non rutrum. Sed gravida nunc vel blandit tempor. Curabitur consequat cursus metus malesuada varius. Suspendisse blandit tempor mattis. Duis sed diam sollicitudin ipsum interdum pellentesque." />
                <label id="lorem2" width="100%" text="Proin vitae pharetra sem. Nunc sit amet urna eget sapien molestie rhoncus. Phasellus nec facilisis nibh. Aenean congue, orci ut luctus aliquam, augue ipsum ullamcorper leo, at blandit urna justo id odio. Etiam aliquam, neque pretium euismod pharetra, tortor orci efficitur justo, nec auctor metus orci at lectus. Nam quis fermentum tellus, at tempor eros. Integer faucibus elementum cursus. Aliquam eu lobortis purus. Nullam et elit vitae arcu tempor tristique ut eget metus. Nam sagittis mi eu enim tempus dignissim. Suspendisse id massa sit amet urna sollicitudin cursus. Ut fringilla tortor et elementum ultricies. Donec euismod tortor sit amet porttitor consectetur. Ut non nibh quis ipsum eleifend vulputate. Nunc interdum non enim in efficitur." />
            </vbox>

            <vbox styleName="sidebar">
                <box><label text="Side Item 1" /></box>
                <box><label text="Side Item 2" /></box>
                <box><label text="Side Item 3" /></box>
                <box><label text="Side Item 4" /></box>
                <box><label text="Side Item 5" /></box>
            </vbox>
        </hbox>

        <box styleName="footer" width="100%">
            <label text="Footer" width="100%" verticalAlign="center" />
        </box>
    </vbox>
</scrollview>

Context

I'm new in haxe and haxeui and discovering it's features, but found bug in relevant example for me

Your Environment

haxeui-core: [1.6.0] haxeui-hxwidgets: [1.6.0] hxcpp: [4.3.2] hxWidgets: [1.11.0]

Version used: haxeui-html5: [1.6.0] haxeui-core: [1.6.0]
Environment name and version (e.g. Chrome 39, node.js 5.4): Chrome 119.0.6045.199
Operating System and version (desktop or mobile): Desktop Chrome in touch mode, Mobile Chrome
Link to your project: https://github.com/haxeui/component-examples/tree/original/responsive

ianharrigan commented 7 months ago

Can you use git versions of haxeui-html5 and haxeui-core? Im fairly sure these issues have been fixed for a while there.

x-0D commented 7 months ago

I'm switched to git versions of haxeui-html5 and haxeui-core, but problem appears in git versions.

ianharrigan commented 7 months ago

Hmmm, yeah, i can repro this now... i wonder if this was introduced recently, i thought this was working... ill have to go back through git history and see

ianharrigan commented 7 months ago

for future me: this is a minimal repro (run in mobile mode): http://haxeui.org/builder/builds/1a77ff80/build/html5/index.html?id=1a77ff80

(http://haxeui.org/builder/?1a77ff80)

ianharrigan commented 7 months ago

Bit late but, this should be fixed now, Ive also updated the version of haxeui on the haxeui.org server, and the minimal repro seems fine now:

http://haxeui.org/builder/builds/3d241aa3/build/html5/index.html?id=3d241aa3

(http://haxeui.org/builder/?3d241aa3)

x-0D commented 7 months ago

@ianharrigan it's not late, with every step, haxeui makes more and more attractive framework to make apps on it. Can you please add <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> into head of html file by default on project generation? It required for make app compatible with mobile viewports. I'll update and test new changes ASAP.

x-0D commented 7 months ago

Rebuild project with new libs. Confirmed, bug is fixed now. look here: https://haxeresponsiveui.appleroot.repl.co/

Can we have now truly native scroll? (without transform updating from JS and fixed css height, width params) should i close this issue and open new feature request?

haxeui / haxeui-html5