Open TechMedX opened 4 years ago
Problem seems to be isolated to iOS. Not present on Android or Windows OS.
It may be good to note in the bug that for every row you extend the dashboard link tile, it drops it another 1/2 a row. e.g. when you extend it across 2 columns it drops 1/2 row, when you extend it across 3 columns it drop is 1 row, extended across 4 columns 1 1/2 row, etc.
https://community.hubitat.com/t/release-smartly-the-hubitat-dashboard-skin-engine/36681/135
2 part issue:
iOS bug 1: "when using zoom: (1.00651); or greater and using 'margin-top: auto; margin-bottom: auto' or 'margin-top: calc(x%); webkit intermittently loses its ability to calculate used/unused space and fails to set a margin."
If using smartly device calibration and the resulting media query uses a zoom value of anything over 1.00651, dashboard link tiles lose their top and bottom margin values intermittently when using 'calc(x%)' and 'auto' for margin-top and margin-bottom. This is certainly an iOS bug. In order to prevent this glitch, we used 'margin-top: calc(12%); margin-bottom: calc(12%);' but sadly when dashboard tile widths are over 1x wide, another bug appears.
iOS bug 2: "when using margin 'calc(x%)' values and a grid item spans further than 1 column wide, webkit doubles its calculation of occupied space, resulting in a lower-aligned element than expected."
Proposed fix:
.tile.dashboard {
margin-top: 1em;
margin-bottom: 1em;
}
This occurs whether or not I'm viewing via the iOS app or via chrome/safari to the Hubitat portal