I have a website which makes use of the following css:
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-direction: column;
}
I have found that this causes issues when rendered on safari (especially on iOS). Either a subset of the page is rendered blank, or sometimes even the whole page. This also does not happen on every request, but about on every second. When the mouse is hovered over elements that are rendered blank, the elements start to appear. Switching the screen rotation on iOS works as well and everything suddenly appears.
I do need both, the height set to 100% (as vh is unreliable on iOS and has the same issue) and the flexbox. However, removing one of both gets rid of the issue. Are there known workarounds, except not setting a height when using flexbox? If I don't set the height to take the whole screen the flexbox only takes the space it actually needs, but it always needs to fill the whole screen.
website actually is an ember application. iOS is 11.3.1. I have tested on iPad and iPhone. Strangely it seems to be not as easy to reproduce on iPhone as it is on iPad.
I'll add a fiddle with a minimal reproduction once I have been able to create one.
EDIT
I was able to track this down to an overflow-y property. Markup basically looks like this:
<html>
<body>
<section>
</section>
<footer>
</footer>
</body>
</html>
and the added css is:
body > section {
flex: 1 0;
overflow-y: auto;
}
interestingly, changing to overflow to scroll seems to fix the issue. I probably need to do some more digging though, as I still haven't been able to create a simple reproducer
Aucun commentaire:
Enregistrer un commentaire