Flickering on some screen sizes

[ghost]

This is a great project. Keep up the good work. When resizing the browser window in the latest Safari, it flickers and jitters pretty badly. I tested in Chrome and the issue is non-existant. Not sure what the problem is, but I wanted to pass it along.

[matejlatin]

Thanks @jkinley some people already told me about it but haven't had time to dive in. I have no clue what could cause this. I also noticed this issue on iPhone when viewed in landscape or on an iPad, no matter either Chrome or Safari...

[Invulner]

Looks like the problem is sub-pixel rendering. If you remove 80% width for article and footer you won't see any issues.

[matejlatin]

@Invulner hmmm... what do you mean by sub-pixel rendering? The 80% width turns out to be a width in px which is decimal?

[Invulner]

Sub-pixel rendering it's old issue of how different browsers floor float values. 80% give us float value during resize - http://joxi.ru/l2ZYKwLf8OlY4m . The main question is how browser deal with this value :) There're many articles about it, and as far as I know - we don't have stable solution(but maybe it's possible to do with JS). I'm not sure that it's the main problem that cause flickers ans jitters, but at least 100% value for width, or px-value solves the problem. Finally, it's just my thoughts.

[matejlatin]

@Invulner got it... will take a closer look shortly. Thanks for taking time to research this :+1:

[FrancescoK]

This happens on Safari for macOS, too, e.g. on the Gutenberg homepage at any width between ca. 752px and 807px width for the browser window.

[matejlatin]

Thanks @FrancescoK . Still haven't got the time to get around it. It's not just Safari, it's Chrome as well. Haven't tried on others but it's probably on all browsers. Must be something with the media queries...