Mobile Safari seems to be the only browser that does *not* resize the
viewport when the keyboard shows and hides. Instead the window is moved
to make room for the keyboard which moves content at the top off screen.
This uses the VisualViewport API to manually resize the `SessionView`
in response to keyboard display events. Additionally, if a DOM element
exists that has the `bottom-aligned-scroll` CSS class, its scroll
position is retained. Currently this only applies to the `Timeline`.
Note that the VisualViewport API was only introduced with iOS 13.
According to [statista.com], versions below 13 made up for 19% of
all iOS users in summer 2020, with the share continuing to fall off.
As a result, this seems like an acceptable workaround.
Fixes: #181
[statista.com]: https://www.statista.com/statistics/565270/apple-devices-ios-version-share-worldwide/
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
Without an explicit height defined on the container, Safari
fails to expand the `.picture` content. On desktop this results
in the image showing too small and at the top of the screen.
On mobile the picture ends up with zero height and is completely
hidden.
This commit fixes the issue by defining a height of 100% on the
`.lightbox` border box.
Fixes: #278
Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>
so do progressive fallback. This won't scale the height of the
image tile height, but it will still scale the thumbnail
on narrow viewports, leaving a blank space underneath the image.
