Document.stylesheets on ios is an empty object


#1

In our Ionic 3 app we need to dynamically change the theme of the app at run time. We do this by making a bunch of calls to this function, which adds the rule you pass to the stylesheet:

addRule(sheet, selector, rules) {
        try {
            if ("insertRule" in sheet) {
                 sheet.insertRule(selector + "{" + rules + "}", sheet["cssRules"].length);
            } else if ("addRule" in sheet) {
                sheet.addRule(selector, rules);
            }

        } catch (error) {
            console.error(error);
        }
    }

for example, we call this like this:

this.addRule(document.styleSheets[0], ".tab-button .icon",color: ${theme.primaryColour} !important;);

I got this idea from this article.

This all works fine in Android but on an iOS device it falls over because sheet[“cssRules”] is null (I want to get the number of rules in the stylesheet so that my insert will also insert them at the end)

In fact on iOS when I add some console debugging document.styleSheets returns an empty object (whereas on Android its an array of stylesheets).

Weirdly on iOS there are no errors when I pass in document.styleSheets[0] to that function but if I log the value of sheet before and after the insert, it is an empty object both times (at least that’s what shows in the XCode console anyway)

Does anyone have any experience of this sort of thing on iOS and have any pointers to why things won’t work?


#2

For anyone else reading this who is trying something similar the insert rule did work on iOS but the styles would only pick up after a full re-start of the app. I managed to get it working dynamically though by using sheet.AddRule in iOS rather than sheet.insertRule.