My design needs to be 100vw wide. The layout should cover the whole screen, so I'm using viewport-fit=cover. This can cause one element to be covered by the iPhone Xn's notch in landscape orientation. I thought this should fix that:
transform: translateX(calc(-1*env(safe-area-inset-right)));
It does indeed move the element from underneath the notch, but it turns out that safe-area-inset-right = safe-area-inset-left; the transformation is applied regardless of whether the notch is on the left or right hand side. This image from this post confirms that. Is there a way to only apply the transformation rule if the notch is on the right hand side?
