Strange "flashing" on mobile devices

Exporting & Previewing
1

There is this demo I did some time ago:
http://zanate.com.mx/public/leonardo_test/

And it used to work just fine.

But just recently I showed this demo during a meeting and turned out is behaving a bit strange. Each time I click, the whole site goes blank at random.

Here you can see the error: https://share.getcloudapp.com/geu2YYAp

Here is a video on how it SHOULD behave:

But each time I open the menu on the right side of each burger, the error happens, and it only happens on mobile devices, on desktop it runs just fine.

Here you can download the hype file:
https://www.dropbox.com/s/xmi5hnl4lwx98g0/Hamburguesas%20Leonardo%20V5.zip?dl=1

2

Hmmm… I wasn’t able to reproduce the problem running on a Samsung Galaxy S7 with Android 8 and Chrome 79. (Nor my iPhone or Desktop). Can you provide more config information and any possible other steps to reproduce?

3

I tried it on a Note 9 and the error happens there too. The devices where I have been able to trigger this is are:

  • Samsung Note 9
  • Oneplus 3 (Android 9)
  • Oneplust 5T (Android 9)

I even ran it locally through a nodejs server and the error still happens.

Just by interacting with the content on the right side of the burgers, it triggers this error. Even after clearing all cache and storage from Chrome on my smartphone, it still keeps happening.

On Firefox for android it runs just fine.

I already updated the jQuery .js to the latest version since it is the only external library that I am using.

4

Thanks; I upgraded to Chrome 80 and can now reproduce. It appears to be a Chrome rendering regression in version 80 that is related to the overflow scrollbars and using translation for element positioning. Therefore the two workaround I found are:

  • you can change the overflow of the MENU symbol element from “Scrollbars” to “Auto Scrollbars”
  • or you can check “Position with CSS left/top” in the Document Inspector

Please let me know if those work for you.

I filed this as a Chrome bug here:
https://bugs.chromium.org/p/chromium/issues/detail?id=1055177

I’ll wait to see what they say if I should further investigate any workaround within the Hype runtime itself. Thanks!

1 Like
5

Yeah, using “Auto Scrollbars” fix this, using “CCS Left/Top” as you mentioned it also fixes it, but I get a slower performance, so “auto scrollbars” for now is the best solution.

Thanks for your time figuring this out.

1 Like
6

You may want to uncheck ‘Use WebKit graphics acceleration’ in the Document Inspector and see if that changes the performance dynamic.

Thank you for reporting this issue!