Charts: Apply iOS-related fixes only to iOS devices

Improves the fixes from openhab#2677, openhab#2511, openhab#2706 and openhab#2710 to only apply on iOS devices.
Avoids/Fixes regressions with other platforms such as https://community.openhab.org/t/chart-scrollbar/157828.

Known issues:
- Charts display in popups on iPads are rendered to large.

Signed-off-by: Florian Hotze <[email protected]>

bundles/org.openhab.ui/web/src/components/widgets/chart/oh-chart-page.vue

@@ -13,13 +13,18 @@
   overflow hidden
   top calc(var(--f7-safe-area-top) + var(--f7-navbar-height))
   width 100%
-  height calc(100dvh - var(--f7-safe-area-top) - var(--f7-navbar-height)) !important
+  --oh-chart-page-height calc(100% - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height))
+  height var(--oh-chart-page-height) !important
   &.with-tabbar
-    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-tabbar-labels-height)) !important
+    height calc(var(--oh-chart-page-height) - var(--f7-tabbar-labels-height)) !important
   &.with-toolbar
-    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-toolbar-height)) !important
+    height calc(var(--oh-chart-page-height) - var(--f7-toolbar-height)) !important
   &.sheet-opened
-    height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-sheet-height)) !important
+    height calc(var(--oh-chart-page-height) - var(--f7-sheet-height)) !important
+
+.device-ios /* fix chart rendering issues on iOS >= 17.4 */
+  .oh-chart-page-chart
+    --oh-chart-page-height calc(100dvh - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - var(--f7-navbar-height)) /* use dvh because with % the height is calculated to 0px and ECharts fails to render */
 </style>
 
 <script>
@@ -39,10 +44,14 @@ export default {
     }
   },
   mounted () {
-    window.addEventListener('orientationchange', this.onOrientationChange)
+    if (this.$device.ios) {
+      window.addEventListener('orientationchange', this.onOrientationChange)
+    }
   },
   beforeUnmount () {
-    window.removeEventListener('orientationchange', this.onOrientationChange)
+    if (this.$device.ios) {
+      window.removeEventListener('orientationchange', this.onOrientationChange)
+    }
   }
 }
 </script>

bundles/org.openhab.ui/web/src/pages/analyzer/analyzer.vue

@@ -235,9 +235,6 @@
   --f7-theme-color-rgb var(--f7-color-blue-rgb)
   --f7-theme-color-tint var(--f7-color-blue-tint)
   z-index 11000
-.analyzer-content
-  .analyzer-chart
-    position fixed !important
 .md .analyzer-controls .toolbar .link
   width 28%
 </style>