Pseudo selectors not applying when app resumes

[petekanev]

From @creambyemute on November 25, 2016 12:23

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

I didn't search Stackoverflow but the android-runtime issues.
This is a real problem and easily reproducible with a sample app.

Tell us about the problem

I created a sample app to play around with the Button:highlighted { ... } selector. So it's the X taps left sample without any styling other than Button:highlighted { background-color: red; } in the app.css.

Additional information: If you navigate to another page the selector works again. So it just doesn't work on the resumed page anymore until you navigate away from it

Please provide the following version numbers that your issue occurs with:

• CLI: 2.4.0
• Cross-platform modules: 2.4.0
• Runtime(s): 2.4.0
• Plugin(s): Do not matter for this issue

Did the error happen while the app was being constructed? (buildtime error)

No

Did the error happen while the app was executing? (runtime error)

Yes, but it's not an error, just not working on Android :)

Please tell us how to recreate the issue in as much detail as possible.

How to reproduce:

• Create a sample app (tns create myButtonHightlightSampleApp --ng) and open app.css and delete the import statement, we don't want anything to interfere with our styling
• Add Button:highlighted { background-color: red; } to the app.css as last line (pseudo selector needs to be at the bottom as other selectors overwrite their rule)
• Start the sample app on iOS first (it works there) and tap the button: it will turn red
• Now turn off the screen and turn it on again (iOS), tap the button: it will still turn red
• Start the sample app on Android and tap the button: it will turn red
• Now turn off the screen and on again (or exit the app and resume it again), tap the button: it will NOT turn red

Copied from original issue: NativeScript/android#640

[tsonevn]

Hi @creambyemute,
Thank you for reporting this issue.
I reviewed this scenario and confirm that this is a real problem for Android. Regarding to that, in my research, I also found that this problem could be reproduced also on none NativeScript Angular 2 project.

Steps to reproduce

1. create project tns create <project_name>
2. add the following line Button:highlighted { background-color: red; } in app.css file.
3. first time after building the app, it will work as expected. Then suspend the app.
4. Start the app again and tap the button.

Regards,
@tsonevn

[creambyemute]

True, I didn't try it on a non Angular app but already suspected the problem is the same there.
Looking forward for it being fixed :).

[PanayotCankov]

Will be fixed by PR: #3219

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.