nativescript-angular
nativescript-angular copied to clipboard
Remove redundant overdrawing in default NS template
Is your feature request related to a problem? Please describe.
About Android overdraw: https://developer.android.com/topic/performance/rendering/inspect-gpu-rendering#debug_overdraw
It seems NS's default theme's structure is causing a lot of unnecessary overdrawing performance issues. I went through every single layout and realized the Angular version has two backgrounds by default, and anything you place to your brand new app will be three times overdrawn.
Describe the solution you'd like
Remove the default backgrounds/shadows from the elements. I've changed the app.css this way:
/* Override the core stylesheet and remove the basic background because we cover it all the time with other layers */
.ns-modal, .ns-root, StackLayout, TabContentItem, Frame, GridLayout,ScrollView, Page, ProxyViewContainer, WebView, span,RadListView,TabStrip{
background-color: transparent;
}
/* Remove Shadows - overdraw reported super bad performance hit */
Button, ActionBar, TabStrip, WebView{
z-index: 0;
}
After this, I still have got a white base background, but with 0 overdraw issues. I feel the difference performance-wise, so it worth considering.
Describe alternatives you've considered
Additional context
@csimpi when you say you feel the difference performance wise, you mean your app is snappier? I think you are right and that we should fix it, however i dont really think this could be noticeable in most apps. But i learned something and i really appreciate it so thank you!
@farfromrefug Yes, I feel the difference when I move to another tab, scrolling and overall just doing things in the app. It's not a major difference, but (since our app is big) I can feel the difference.
I've got an opposite opinion on NS slack channel that "transparent" elements have bad performance so I'm still not sure I'm right.
in a sense it is true as it always better to have less "depths" in your page layouts than to use transparent background. and it would solve the overdraw too. this is what I do. though I think the link you shared is interesting and I ll test the background color trick