BasicUI: Switches with mappings not working with iPhone 13 mini/iOS 17.4.1/Safari

owl770 commented 6 months ago

Which UI are you reporting an issue for?

[ X] Basic UI
[ ] HABPanel
[ ] HABot
[ ] CometVisu

The problem

Running OH4.1.2 (openHABian) on RPi3 with a sitemap. Problem as described in #120 Fix installed as per issue #120 and working OK on OH3 but then migrated to OH4.1.2 (different SD card with fresh openHABian installation). Modified fix as follows: /etc/openhab/html/issue-120.css (file not changed from OH3 version)

.mdl-ripple { background: #000; opacity: 0.001; }

/etc/openhab/html/issue-120.html (OH3 version changed to this)

<!--
So Switch button works on iOS : https://github.com/openhab/openhab-webui/issues/120
-->
<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">

        function addStyleSheet(filename) {
        var head = window.parent.document.head
          , link = window.parent.document.createElement('link')

          link.type = 'text/css'
          link.rel = 'stylesheet'
          link.href = filename

          head.appendChild(link)
        }

        function addStyleString(str) {
            var node = window.parent.document.createElement('style');
            node.innerHTML = str;
            window.parent.document.head.appendChild(node);
        }

        var _headers = window.parent.document.body.getElementsByClassName("mdl-layout__header mdl-layout__header--scroll navigation navigation-home");
        var _header = _headers[0];
        _header.style.display = "none";

        // Hide the last web element of the page ...
        _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
        _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
        _lastWebViewElement.style.display = "none";

       // Change the style for images ...
       // addStyleString('div > img { border-radius: 15px !important; height: 200px !important; width: 200px !important; position: relative; float: right; }');
       addStyleSheet("../static/issue-120.css")
    </script>
</body>

/etc/openhab/sitemaps/guest.sitemap includes the following line at the end (unchanged from OH3 version)

Webview url="/static/issue-120.html" visibility=[RoomNumber==999]

The visibility parameter hides the Webview control.

Using the sitemap through the basicui works on Android/Samsung Internet, OSx/Chrome but not on iOS/Safari. On iOS buttons/controls need to be double-tapped to respond. When they are double-tapped, they work as expected but do not respond if you single-tap them.

The iOS openHAB app performs correctly.

Expected behavior

basicui sitemap in iOS should behave as with other platforms and the iOS openHAB app

Steps to reproduce

As above

Your environment

runtimeInfo:
  version: 4.1.2
  buildString: Release Build
locale: en-AU
systemInfo:
  configFolder: /etc/openhab
  userdataFolder: /var/lib/openhab
  logFolder: /var/log/openhab
  javaVersion: 17.0.10
  javaVendor: Raspbian
  osName: Linux
  osVersion: 6.6.20+rpt-rpi-v7
  osArchitecture: arm
  availableProcessors: 4
  freeMemory: 118452720
  totalMemory: 372183040
  uptime: 20648
  startLevel: 100
addons:
  - automation-jsscripting
  - binding-fronius
  - binding-ipcamera
  - binding-mqtt
  - binding-openweathermap
  - binding-pushover
  - binding-sensibo
  - binding-sonos
  - misc-openhabcloud
  - persistence-mapdb
  - persistence-rrd4j
  - transformation-jsonpath
  - transformation-map
  - ui-basic
  - ui-habpanel
  - voice-voicerss
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: true
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: macos
    pixelRatio: 2
    prefersColorScheme: light
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: 8
    hardwareConcurrency: 8
    language: en-US
    languages:
      - en-US
      - en
    onLine: true
    platform: MacIntel
  screen:
    width: 1470
    height: 956
    colorDepth: 30
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36
    (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
timestamp: 2024-04-24T07:42:27.086Z

Browser console

No relevant issues in the browser console.

Browser network traffic

No relevant issues in the browser network traffic.

Additional information

owl770 commented 6 months ago

Interestingly, this behaviour does not happen using Chrome on the same iPhone. Using Chrome, it all works as you would expect. Does this mean it is Safari related?

owl770 commented 6 months ago

Interestingly, this behaviour does not happen using Chrome on the same iPhone. Using Chrome, it all works as you would expect. Does this mean it is Safari related?

Sorry, the issue does happen in Chrome too on the same iPhone. :(

lolodomo commented 2 months ago

@kaikreuzer : I don't own Apple devices. In case you use one of them, maybe you can search a proper fix ?

openhab / openhab-webui