nativescript-cardview icon indicating copy to clipboard operation
nativescript-cardview copied to clipboard

CardView shadow multiplying issue on Android

Open marklanhamhc opened this issue 6 years ago • 11 comments

There's an issue when you navigate between the pages on Android, the CardView shadow seems to get heavier each time you navigate back to the page.

Here's a screen recording to show whats happening: https://www.dropbox.com/s/hbyofz6o1tt7l96/CardView-shaddowIssueAndroid.mov?dl=0

Nativescript: 6.1.0 Android version: 6.1.0 @nstudio/nativescript-cardview: ^1.0.0 tns-core-modules: ^6.1.0

marklanhamhc avatar Sep 11 '19 08:09 marklanhamhc

we are seeing the same issue @marklanhamhc Do you have a workaround?

flodaniel avatar Apr 06 '20 19:04 flodaniel

We ended up not using the nativescript-cardview plugin and changed the design of our app. That said, we started to use the nativescript-cardview plugin again on one of our new apps but this time we changed one of our other plugins from nativescript-advanced-webview to nativescript-awesome-webview-with-custom-menu-items which might have been causing the issue and we've not seen this issue since.

Hope this helps!

marklanhamhc avatar Apr 07 '20 10:04 marklanhamhc

strange. I tried to find the issue yesterday and played around with the underlaying native component on android. I managed to set the elevation (which is the property that causes the issue) to 0. But as soon as I set a positive number it began stacking again. Setting it to 0 and then to a e.g. 10 again, also did not help. Also setTimeout or requestLayout() did not help resetting the elevation of the CardView.

I am totally unsure, which plugin could cause interference. We have quite a lot in our app..

flodaniel avatar Apr 07 '20 12:04 flodaniel

Yeah unfortunately, in my experience, sometimes you have to just go through each plugin, one at a time, disabling them and then testing to see if it makes a difference. Alternatively, try creating a simple app with just the cardview plugin and see if it still does it.

marklanhamhc avatar Apr 07 '20 13:04 marklanhamhc

Just a comment from what I recall about navigating, the views should be cached when you go to a route/page and come back, so it shouldn't be recreating (which would duplicate) the views. So this is likely a different native lib causing the issue as @marklanhamhc mentioned. I've never seen this in any apps I've done with cardview. If you can pinpoint that this happens with a plain NS app with the cardview plugin (maybe look at the demo and add a second page for navigation and let me test it) then I'd be glad to help fix it, but without that it's all guessing 😄. @Firetrip let me know if you have time to possibly fork and edit the demo app so I can quickly clone and run your fork demonstrating the issue with this plugin, thanks.

bradmartin avatar Apr 07 '20 14:04 bradmartin

Hi,

I am having the same issue here. Only on Android. iOS is ok. Some news about this problem?

I am running on a real device and NS 6.5.0 with Vue.

Thanks

giulianimartini avatar May 19 '20 02:05 giulianimartini

@giulianimartini do you have material components installed? i did a lot of debugging and filed the following bug report, which i think is the actual problem, or at least the two plugins cause some unexpected interaction behavior: https://github.com/Akylas/nativescript-material-components/issues/135#issuecomment-612059922

flodaniel avatar May 19 '20 04:05 flodaniel

@Firetrip I only have a package called "nativescript-material-ripple" (https://market.nativescript.org/plugins/nativescript-material-ripple) installed on my project, but it is not used on the page of the strange behaviour. My package.json dependencies are:

"dependencies": { "@nativescript/theme": "~2.3.3", "@nstudio/nativescript-cardview": "^1.0.0", "axios": "^0.19.2", "btoa": "^1.2.1", "nativescript-fontawesome": "^1.0.0", "nativescript-fonticon": "^2.0.0", "nativescript-iqkeyboardmanager": "^1.5.1", "nativescript-material-ripple": "^2.5.4", "nativescript-theme-core": "^2.0.24", "nativescript-ui-listview": "^8.1.2", "nativescript-vue": "~2.5.0", "nativescript-vue-fonticon": "^1.0.3", "tns-core-modules": "^6.5.1", "vuex": "^3.3.0" },

Maybe some of these dependencies are the problem?

giulianimartini avatar May 19 '20 14:05 giulianimartini

can you try uninstalling the ripple plugin and then check if the bug still occurs?

flodaniel avatar May 20 '20 05:05 flodaniel

@Firetrip That's it! I removed the ripple plugin and the elevation shadow stopped of multiplying in each call to the navigateBack method. Do you know any more plugins that are giving the same problem? (Except the Akylas, as already mentioned).

giulianimartini avatar May 20 '20 12:05 giulianimartini

hey, no sadly not. But it seems it is some sort of interference between all Akylas plugins and the cardview plugin. Maybe somebody can figure out why this is happening.

flodaniel avatar May 22 '20 06:05 flodaniel