I've encountered an issue with displaying an image in the DOM that is sized based on the screen height. While this setup works flawlessly on most browsers and devices I've tested, Safari iOS 7 seems to be causing some trouble.
Specifically, in Safari iOS, the image loads correctly initially for the current orientation. However, when switching between portrait and landscape modes, the image fails to resize according to the new height (unlike on Android devices where it behaves as expected). Oddly enough, if you rotate back to the original orientation, the image does resize but for the previous orientation - so now it's incorrect!
Interestingly, I've noticed that interacting with another element on the page that renders based on screen height while the incorrect image is displayed actually corrects the image size issue.
At this point, I'm considering forcing a CSS reload upon orientation change, unless there is a better solution at hand. Would this require implementing something in JavaScript, or is there a way to achieve this purely through CSS?
Here's the relevant CSS snippet:
position: relative;
height: 90vh;
z-index: -3;
bottom: 50px;
background-size: auto 100%;
background-position: 30%;
background-repeat: no-repeat;
background-image:image-url("the/path/to/my/image.jpg");
*Note: jQuery is not an option here, as this is an AngularJS application