Flickering on iOS Safari
ronilaukkarinen opened this issue · comments
As per report here there's some problems on Safari and Brave. Didn't occur to me in an instant. -webkit-transform-style: preserve-3d and -webkit-transform: translate3d(0, 0, 0); fix the flickering when set on wrapper, but break the other elements.
Will investigate more later.
7a7294ebfa2fbc17.mp4
Attempted to fix today but it's really slow to test with BrowserStack as I don't have an iPhone. For now I'm going to support only Chrome because it seems kinda impossible to get the current layout working without using position: fixed;.
Attempt to change back to position: sticky; like it originally was, but this way Android Chrome scrollability suffers tremendously... Will debug more later.
Looks like the flickering stops for me when you remove the position: absolute from this selector: .layout-single-column .columns-area__panels__main
Of course, other stuff breaks or get misaligned, but the flickering stops. 🤷♂️
@yatil I know. Safari on iOS doesn't like position property. The original Mastodon UI is built with position: sticky; but that doesn't work well if the "side bar" is aligned to bottom. I need to either get this work on Safari with some hack or remove all position attributes and try to figure out an alternative way.
I most probably will try to revet to original layout first and then start building the new top bar + scollable area + bottom bar layout from there without tweaking position in between. I once got it working on iOS Safari, but after that the scrollability on Chrome on Android started get janky. This is a very frustrating issue, but I like challenges.
If you have ideas, I'm all ears.
Fix confirmed here. 🥳