I recently ran into a strange issue while working on an app using Cordova (Phonegap). The styling of many elements in the app depends on the class I set on the body element. For example:
.gray .background{
background: gray;
}
.gray .title{
color: white;
}
When I add the class "gray" to the body element like this:
document.body.classList.add("gray");
I expect all styles on the page to update accordingly. However, on one particular device I tested, the styles did not change as expected. Even though I verified that the class was added using JavaScript, the styles remained the same. This inconsistency is puzzling as it does not happen consistently.
Is there a way to manually force an update to the styles in this situation?