Problem with Chrome / Opera blink painting

Question

I found an inexplicable problem with drawing my pages, and then "uncoloring" in blink browsers. After the page is displayed, most of the viewport, but not all, disappears and stops drawing. Here is the screen, as it should be after I made it draw:

And here is a screen that looks after the page displays and “colors” itself:

The behavior is consistent, and the same regions become unpainted every time. This is not a very demanding application in terms of visual animation.

Technical info: Angular, angular -ui-router, CSS animations for everything.

Any insight into why blink renders and then skips most of the page is greatly appreciated.

Answer 1

You can try putting the ng-cloak directive in your body tag, for example.

Additional information about ng-cloak at this link: ngCloak docs

I hope my answer suits your case.

Answer 2

I have the same problem, but on the login page.

I also use AngularJS and ui-router, and I think this is caused by a redirect inside the onStateChangeStart event.

Dicussion on github

I found that there might be a problem with the motive of the engine, and then find your question here, because if you enable the rerender page option on the google chrome devtool rendering tab, this problem will be solved.

So! Today I tried to change the css properties and found that removing

 position: fixed; 

from the main css container solves the problem. Perhaps you have some of these properties in your styles. Try to remove or replace them.

Respectfully!