Exported Site Has Strange Behaviour on iOS mobile

[KProServices]

On iOS (safari on both iPhone 6, iPhone 4, and iPad) my site goes squirrelly on the exported version of the site (without any major modification). Everything displays completely randomly.... images repeat, images swap, formatting is lost, etc. This has been happening for the last couple weeks. Runs great on Chrome on these same devices and no issue on desktop devices. Also no issue when running on webflow. Just exported sites on iOS. It will randomly appear and sometimes the issues will resolve if I clear the cache. Other times it doesn't. I can't find a pattern or trigger. I even checked on a variety of internet connections to see if that might be the issue... help.

Read only link: https://preview.webflow.com/preview/wmmf?preview=436853e2255cbdbc4077fe3f8e0afc61

Exported site: http://kproservices.ca/festival/

Screenshot 1: http://screencast.com/t/5K0dH4pKNg
Screenshot 2: http://screencast.com/t/PnnBe98C6Dl

[thewonglv]

Hi @KProServices, thanks for the detailed inquiry - I took a peek at the site (both yours and a duplicated one) and they seem to work as expected (both in the browser and exported) :-/
(see attachment)

I'm not really sure what could be causing your site to experience this behavior. Try the "Divide and Conquer" debugging method to see if there is anything involved on your end with the trouble :-/
(i.e. remove plugins, test, remove custom code, test, etc)

[KProServices]

It didn't do it for roughly 1 week and then it popped up again this afternoon. I honestly haven't been able to figure it out. But is is an iOS only issue and appears completely randomly.

Anyone else experience this before?

[KProServices]

This morning... Logo was distorted on one instance and in the second instance the main nav wouldn't open, the hero slide nav disappeared (along with the overlay set for each slide), and the Google maps embed didn't display. I have seen this exact same behavior once before. Could the map embed cause this?

[KProServices]

So I cleared the cache and reloaded kproservices.ca/festival and got what is shown in the screenshot below. Help

[KProServices]

So I noticed something... When on a wifi connection it does it. And on a cellular connection it doesn't. (My home wifi connection). It also did it on a separate wifi connection at another location but I didn't think to toggle wifi off there and try it on cellular only.

Attached a a bunch of screenshots. The ones where it appears fine wifi is disabled.

[cyberdave]

Hi @KProServices, thanks for the screenshots, I will go take a look to see what I can find out Cheers, Dave

[KProServices]

Thanks Dave. Very odd behavior and I can't pin it down. Thanks again.

[KProServices]

Any luck on this? The issue still persists.

[cyberdave]

Hi @KProServices, thanks for the bump. I have not yet a solution, but I am continuing to check this out. I am bumping the priority on this one to high Sorry for the delay, I will do my best to respond back ASAP. Cheers, Dave

[KProServices]

Any luck? It is still doing it (predictably) when connecting to wifi.

[vlogic]

@KProServices, I wonder if the screen pattern could be causing a redraw error and would have guessed that was the cause, but:

I have just had a site lose some formatting (a single class gone) on iOS mobile Safari only. It worked perfectly for several weeks and then out of the blue default formatting on that class - missing.

No change or republish on the exported site.
The site has exported code.
Works perfectly on desktop and other mobile devices.
I have not updated or made any changes to the OS or Safari on the iPad (that I am aware of).
The error on mine is adjacent (to the left side) of a video embed

really puzzling.

Mine displays wrong with exactly the same display error every time.

I am going to isolate the section, republish and and export and test separately, (preserving the current version).
I am also trying an iOS update that was pushed out yesterday (I think).

I will test your site as well when the update is completeand see if I can reproduce any of the random errors you have captured.

The randomness and WIFI only is what make me very curious about the pattern and possible latency in refresh on load.

[KProServices]

Thanks @vlogic!

I just tried it again from a couple different connections tonight and still same issue. Except mine is displaying randomly with some similarities each time (menus don't work, slider nav missing, etc.) See my latest screenshots.

I will also try the update once my phone is finished backing up and see what iOS has to say, haha. This is frustrating beyond belief.

The wifi piece has me puzzled.

[vlogic]

I cannot reproduce any errors on your site with my iPad, but after looking a bit deeper I think the issue is very likely the 2x2 png with the enormous sea of repeat. That historically can be murder for some systems and processors to redraw and it can corrupt redraw for any object above or below especially pngs with alpha / post compression or lower bit depths and could trigger some pretty random hiccups.

First try disabling it to see if it is a potential culprit. If the problem goes away then try generating the tiled pattern repeat in photoshop and resave a much larger chunk to tile or use as a single image overlay. In many cases it will provide a better result and the file size will be negligible as the data is repeating and that compresses very well as a png.

Theory: WIFI is dumping the repeat and everything else all at once and the processor or Safari is taking a similar dump. Slower data feed and it has a tiny bit longer to churn out each piece. Give it a shot.

[vlogic]

Also, the indexed png is only saving a minuscule amount 61k vs 70k for a 24 bit png RGBA straight from Photoshop's export for web. And it is pretty huge 1000px so you are forcing scale on a bitmap, which isn't originally intended to scale, so it further hammers redraw and smoothing quite a bit. You should get a cleaner result working at target size for the largest size using 24bit RGBA and it will be a smaller (data) size as unothodox and counter intuitive as it may feel to do so it will scale much better. The background may be OK or better at the lower bit depth - if you are always displaying pixel for pixel - with no scaling.

I think the combo is just the perfect storm for a browser that occasionally struggles a bit for me on older devices.

[KProServices]

Thanks I will definitely give that a shot! You rational and theory makes complete sense.

The indexed PNG you referenced in your second reply, are you referring to the background image? I am not quite sure what you are referencing.

[vlogic]

The .wildmtnmusic-logo is the indexed png I was referring to (an 8-bit png with a selective or reduced color pallet). Its natural size is 1000px x 648px, but it is displaying at a max of 475 x 328 over the slider. Saving it out as a actual final target size as a 24-bit with transparency (alpha channel) may perform better when layered in the stack and should redraw cleaner than the 8-bit especially when animating and scaling. 24bit vs 8-bit is only 3k more at the same 1000px size. When you bring it down in size it saves a few k. You can save a 2x version if you prefer, but I don't think it is necessary in the context.

The dot pattern overlay is likely fine at 8-bit and is probably a good choice if it is always displaying at 100% and not scaling in the layout or at runtime (using a transform). I would just try getting rid of the huge repeat of a tiny png and see if that sorts the display randomness.

I didn't look at the lens flare before. It is also much larger than it is displaying.

Usually with modern devices you don't get display errors until you really hammer it with replication or a huge array of a bunch of things animating at once. I am probably way overstating tiny things in your case, because I would never have expected that you would get the anomalies you are seeing across multiple devices. 8-10 years ago the threshold was much smaller and it was common on laptops with strapped resources / shared or no GPU. But your phone is probably infinitely more capable than they were. Still puzzled a bit, but I think it is most likely the dot pattern.

Best of luck. Hoping I am not sending you on a wild goose chase - I hope it somehow resolves the issue.

[KProServices]

I made some of the changes to the logo and flare. The 8bit comes from the compression software used. They were output as 24 bit but converted to 8 bit (alpha preserved). I haven't changed the dot pattern overlay yet... I played around with a couple options but reverted back to the default to see if was the logos first. Still puzzled.

[samliew]