Basically the issue can be viewed here, I blurred it on purpose, but the issue is easily visible. https://i.gyazo.com/f9a4fa72d35165acbeea94b71a15eaa6.mp4
I've got this weird issue that only appears on iphone, if there is only 1 message present, and that element is overflowing, it just won't add the scrollbar to the container. Untill I flip my phone to landscape and then back to the original state. After that it's perfectly scrollable. Other conversations are working fine that have more than one message. This issue both occurs on chrome and safari on iPhone.
The css for the container is quite simple.
.container { width: 320px; overflow-y: scroll; } The css for the messages inside are simple too, they only have a fixed width, no height specified.
If I check on Chrome and simulate as iphone on my desktop, it works fine too.
Does anybody know how I can fix this issue?
1 Answers
Answers 1
It would seem that your container isn't initially scrolling because the content does not extend beyond the height of the container. This changes when you rotate the screen because the content then extends beyond the screen height. You may want to try defining a min-height on an inner container that's greater than the displayable height.
.container { /* Define height for container, probably best to use calc with a vh to dynamically assign for various screen heights. */ height: 800px; overflow-y: scroll; /* Utilize a dynamic width to fit variable screen widths. */ width: 100vw; } .container--inner { /* The extra percent should force scrolling. */ min-height: 101%; }<div class="container"> <ul class="container--inner"> <li class="entry>...</li> </ul> </div>
0 comments:
Post a Comment