All geek questions in one place

Webapp on iPad 3 mesh display slow screen image

I have a webapp for iPod touch and iPad. It works like the charm of iPad 1 and iPad 2. Now I have tested the new iPad (iPad 3, iPad HD, any name that will be used), and I see that the picture on the screen is slow. I see several blocks that are drawn one by one.

Does anyone know how I can get a picture of the screen faster than iPad 1 and 2 instead of slow?

EDIT: Bounty Expiration The generous at least had answers to some questions, although they were not enough to award a reward. The question remains open.

+6
source share
3 answers

I updated the new iPad (iPad 3) with iOS 6 and I no longer see rendering problems. I have seen in several articles that Safari’s speed has increased significantly. This performance improvement in iOS 6 solves the problem for my web application.

Since the iPad we use is for a web application, I recommend iPad 3 with iOS6 only.

Thanks for the posts and answers!

0
source

We had a similar problem in our application, and we tried to carry out some optimizations, here are the two most effective approaches:

  • Avoid using CSS3 effects. We used a lot of CSS3 shadows in previous versions, which significantly slowed down the rendering process on iPad 3. After replacing these shadow effects with background images, the performance improved significantly on iPad 3.

  • Optimize Javascript. Our application has some scrollable components, whenever a user scrolls a component, some Javascript code will be executed to perform some loading work, such as loading images in a lazy way. Scrolling iPad 3 will be delayed by 500 ms when the user tries to scroll from one page to another. Then we found that in the scroll callback some unnecessary work was done on loading the images, after removing it, the scroll performance was acceptable.

These two approaches can be very specific to our application. I hope they help you too.

+2
source

Have you checked the viewport in your meta?

I use

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1″>

I did not feel any performance overhead. Perhaps some parts of your webapp have fallen into a weak web presentation.

You can start commenting on your HTML until you find that your webapp is smooth.

+1
source

Source: https://habr.com/ru/post/912205/

More articles:


All Articles