iOS 14 Safari Scroll-/Bounce Problem

Question

Created Oct ’20

Replies 1

Boosts 0

Views 3.4k

Participants 1

Hi everyone,

we develop web sites/apps (Javascript, JQuery, JQueryUI) where people enter questionnaires. Before iOS 14 everything is ok, but with iOS 14 we experience that Safari on iPhones freeze on certain occations:

we use web animations (fade out/in) to go from one question to another; everything works fine, but if the user scrolls on the site such that the bounce animation at the bottom happens, it breaks the entire site and no further interaction is possible
if the „scroll-damage“ is done and we completely disable animation, and just set a css-property (display: none) on a div, it works, but if we do the same within a setTimeout(), it breaks
it just happens on iPhone, but (as far as we tested) not on iPad
it just happens on iOS >= 14.0.0

we heavily tried to debug the issue, but couldn't find the real cause.

anyone experiencing the same or a similar issue? or even has a fix? ;)

Boost

Answer 1

tschu OP

Oct ’20

in the meantime we figured out that the problem is not animation-related, but as follows:

we have a fixed footer at the bottom of the page, which has a ‚display: table‘ container element with 3 ‚display: table-cell‘ children for vertical alignment. If we replace the table at the bottom with a display: flex (and according changes), it works

it seems that iOS 14 cannot handle a table with vertical alignment: center at the bottom (?)

0