Highlighted

An HTML5 banner ad freezes on mobile, while working perfectly on Desktop

Community Beginner ,
May 29, 2020

Copy link to clipboard

Copied

Hi guys,
I'm working on an animation. This is a preview link: https://gocreative.cloud/mysoulcbd/1080x1920/

As you can see, when it is opened/previewed in the Desktop browser it loads quite nice and smooth, while when I test it on mobile, it is almost impossible. It freezes and goes extremely slow. 
Do you know where could be a problem? This is an IAB mobile standard size, 1080x1920. Elements are quite optimised, in terms of .png size. Any idea?

 

Thanks!

Community Beginner
Correct answer by zviz | Community Beginner
After fiddling around with your file, whatever I tried didn't result in better performance on mobile. I tried googling and found a really simple solution. All you have to do is add this line to the head of your html document: <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> Apparently that line enables GPU raster for mobile. Check: https://zviz.net/TEST/zviz/

Views

155

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

An HTML5 banner ad freezes on mobile, while working perfectly on Desktop

Community Beginner ,
May 29, 2020

Copy link to clipboard

Copied

Hi guys,
I'm working on an animation. This is a preview link: https://gocreative.cloud/mysoulcbd/1080x1920/

As you can see, when it is opened/previewed in the Desktop browser it loads quite nice and smooth, while when I test it on mobile, it is almost impossible. It freezes and goes extremely slow. 
Do you know where could be a problem? This is an IAB mobile standard size, 1080x1920. Elements are quite optimised, in terms of .png size. Any idea?

 

Thanks!

Community Beginner
Correct answer by zviz | Community Beginner
After fiddling around with your file, whatever I tried didn't result in better performance on mobile. I tried googling and found a really simple solution. All you have to do is add this line to the head of your html document: <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> Apparently that line enables GPU raster for mobile. Check: https://zviz.net/TEST/zviz/

Views

156

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 29, 2020 1
Community Beginner ,
May 31, 2020

Copy link to clipboard

Copied

Instead individual images try and export them as texture atlas.
https://helpx.adobe.com/animate/using/create-sprite-sheet.html

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2020 0
Community Beginner ,
May 31, 2020

Copy link to clipboard

Copied

Hi zviz, thanks for your reply. Unfortunately, the atlas option is not better:  https://gocreative.cloud/gocreative.cloud/mysoulcbd/1080x1920_sprite/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 31, 2020 0
Community Beginner ,
Jun 01, 2020

Copy link to clipboard

Copied

Sorry it didn't work out. Without the actual .fla file, that's the only thing I could think of.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 01, 2020 0
Community Beginner ,
Jun 01, 2020

Copy link to clipboard

Copied

Here is the fla file: http://gocreative.cloud/mysoulcbd/fla_files.zip If you have any idea what can cause the problem, please share 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 01, 2020 0
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

After fiddling around with your file, whatever I tried didn't result in better performance on mobile. I tried googling and found a really simple solution. All you have to do is add this line to the head of your html document: <meta name="viewport" content="width=device-width, minimum-scale=1.0" /> Apparently that line enables GPU raster for mobile. Check: https://zviz.net/TEST/zviz/

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 1
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

Please find files here: http://zviz.net/TEST/zviz/fla_files.zip

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

You're great zviz! It works perfectly now 🙂
Thanks a lot!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 1
zviz LATEST
Community Beginner ,
Jun 02, 2020

Copy link to clipboard

Copied

You're welcome! Glad I could help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 02, 2020 0