Dashboard 2.0 button hit box bug on mobile devices

Hello All,

I noticed a glitch in Dashboard 2.0 where buttons hitbox is not registering any events if used in a mobile phone browser. Specifically if the very edge of the button is tapped. I attached a gif showing the issue.

Is this something that can be rectified somehow from my end, or is this an issue with how mobile browsers handle touch events?

Note that this issue does not exist on full desktop browsers.

err

Mobile devices do act differently. Please specify details.
Different browsers do act differently. Please specify.
You do not use default buttons. How those are made? CSS override or custom built with the ui_template. Not possible to say anything for custom stuff without seeing the sources.

Thanks for the quick response, will include more info with future posts.

In regards to the issue, indeed i use custom ui_template on the gif shown, however the issue exists even if i use default theme. Even if i add single button and a debug node, results are the same. Full JSON of that single button test is below.

Behavior is tested on S7 Edge and Chrome, Pixel 7 Pro with Chrome and Desktop with Chrome and Firefox. Issue exists only on mobile devices.

[
    {
        "id": "a4a98b697471c1e3",
        "type": "tab",
        "label": "test",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "8fa8d48807f25123",
        "type": "ui-base",
        "name": "test",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "showPageTitle": true,
        "navigationStyle": "temporary",
        "titleBarStyle": "fixed",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true
    },
    {
        "id": "c3675db52282be61",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#00423c",
            "primary": "#0e5b7c",
            "bgPage": "#000000",
            "groupBg": "#233e43",
            "groupOutline": "#001e24"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "10px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "ef37083ce156f591",
        "type": "ui-page",
        "name": "test",
        "ui": "8fa8d48807f25123",
        "path": "/page2",
        "icon": "mdi-dip-switch mdi-48px",
        "layout": "grid",
        "theme": "c3675db52282be61",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "4"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "4"
            }
        ],
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "c12752bebba508c7",
        "type": "ui-group",
        "name": "HDMI Out 2",
        "page": "ef37083ce156f591",
        "width": 4,
        "height": "4",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "3756fdf36cd12944",
        "type": "ui-button",
        "z": "a4a98b697471c1e3",
        "group": "c12752bebba508c7",
        "name": "Out1 Input 1",
        "label": "<font size=6><span class=\"mdi mdi-video-input-hdmi\"></span><font size=5>Input 1",
        "order": 1,
        "width": 0,
        "height": 6,
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "true",
        "payloadType": "bool",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "enableClick": true,
        "enablePointerdown": false,
        "pointerdownPayload": "",
        "pointerdownPayloadType": "str",
        "enablePointerup": false,
        "pointerupPayload": "",
        "pointerupPayloadType": "str",
        "x": 130,
        "y": 60,
        "wires": [
            [
                "5c43785beb47197e"
            ]
        ]
    },
    {
        "id": "5c43785beb47197e",
        "type": "debug",
        "z": "a4a98b697471c1e3",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 300,
        "y": 60,
        "wires": []
    }
]