Header Rendering Artifacts on iOS 11 Safari

[OktarinTentakel]

The current example setup under

https://patternlab-handlebars-preview.netlify.com/?p=all

shows problems with the header rendering on iOS 11.

The height is rendered approximately half of the height it's supposed to be and the menu flyout therefore does not attach anymore.

Additionally the header also does not push the contents down anymore and overlaps the rendered list or detail view.

[OktarinTentakel]

The problem sporadically also appears on iOS12, especially the case where the menu is put on top of the pattern, overlaying the display, therefore cutting the top part off visually.

If I'd had to guess, I'd say there's a race condition in the header when calculating its height (not waiting for repaint after class application for example) or a missing resize event or a missing trailing call after resizing. Something like that ...

[sghoweri]

Hmm. It could also (potentially) be a browserslist / autoprefixer issue... 🤔

PR's are most certainly welcomed to address this! Otherwise I'll do my best to get around to this soon (hopefully this coming weekend 🤞)

[mfranzke]

@OktarinTentakel does the problem still occur on your test devices ? At least I cannot reproduce those bugs on iOS 13.5.1 any more.

[OktarinTentakel]

@mfranzke I reported the bug specifically for iOS11 at the time, since we tend to support major browsers two versions back with the thought in mind that our customers use slightly outdated OSes for viewing the PL as well.

So the bug might very well be gone on 13. But since there is no major jump in rendering from 11 to 13 there also is no reason why one shouldn't have a look at this, because this might be a general timing problem simply occurring less on 13.

Of course you could declare this as a visual "wont fix", but if this were a functional bug, even two versions back, this would hinder our testing inside PL.

So, long story short: I cant't tell you if it's gone on 13, but considering our default browser support matrix the fact if bugs disappear get relevant with ios14, for ios12 :D

[mfranzke]

@OktarinTentakel sorry, there might have been a misunderstanding - I didn't want to imply that this should be a "won't fix"; I just can't retest it myself, I've only recognized that it works on iOS 13 and it could have been that it was solved in the meantime in general.

Do you even also have the chance in supporting by evaluating and providing a possible fix for the issue?

[OktarinTentakel]

@mfranzke If you are on a Mac you can check it fairly easy with the xcode simulators. If not, Browserstack is your friend.