page rendering lag

[Yan Yi]

Hello!

After navigating to a new page, the positions of my items do not render correctly immediately. Does anyone know how to solve the below three problems?

Problems:

1. Default appery grey background appears first, followed by my app's white background. This is very ugly. Is there a way to load white background immediately?

2. Sometimes the white background is only loaded halfway and I have to click the "back" button on that screen to navigate away. Only after going back to the page a second time does the white background load fully.

3. Loading of components on screen is lag. They will be slightly misaligned immediately after the page transition, and then only go into the correct position after like 0.5 seconds. Weirdly, the page transition in reverse is usually smooth when I hit the back button.

   (problems 1 and 2 also appear in the Appery web tester, not only when tested on iPhone)

   Ways I tried to fix the problem which did not help:

4. use either CSS or Javascript to set the background color. No difference for problem (1).

5. prefetching pages

   I saw two posts (below) which says that it is impossible to have a smooth transition. However, those posts are a year ago, and I am hoping there is a way now. I've also tried some apps created on Appery (like USA today news) which shows very smooth transitions and page loadings - so much better than mine.

   https://getsatisfaction.com/apperyio/...
   https://getsatisfaction.com/apperyio/...

[Maryna Brodina]

Hello!

Please try to tick "Render all pages in one HTML file" option in App Settings.

[Yan Yi]

Is there any other way to do it? I have many pages so would prefer not to render all as one HTML page.

[Maryna Brodina]

Please check if it works this way and let us know result.

[Yan Yi]

"Render all pages in one HTML file" helped to speed things up. Thanks.

However, on many of the pages I can still see the default grey background appearing first before my white background is loaded. Is there any way to change the default grey background color to get rid of this?

[Maryna Brodina]

Hello!

In custom CSS try to add background color for body and page. This way there won't be shown default color while navigation prebody, [data-role="page"] {
background: #ff5599 !important;
}/prewher #ff5599 - background color you need.