openhab-webui
openhab-webui copied to clipboard
openhab
BasicUI: Switches with mappings not working with iPhone 13 mini/iOS 17.4.1/Safari
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
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?
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. :(
@kaikreuzer : I don't own Apple devices. In case you use one of them, maybe you can search a proper fix ?
