Search code examples
javascriptcssioscordovasafari

Stylesheets Rules Return Null only on iphone?

I'm trying to read styleSheet rules through JavaScript but both document.styleSheets[0].rules and document.styleSheets[0].cssRules return Null. To clarify: if the loaded css looks like this:

.example{
  position: relative;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

Using Javascript, if I call document.styleSheets[0].rules assuming the css is the first on in the html file, I should get the rule data. But that doesn't happen.

This issue only happens on iOS. It works fine on Safari and also works fine on Android.

Thank you.

Solution

  • So I fixed the issue. It appears to be caused by a combination of reasons. As this is the first time I use my code with cordova iOS, I think I didn't fix XHR known issue with WkWebview correctly on the first time I added the cordova-plugin-wkwebview-file-xhr plugin. I think it wasn't added correctly. So I had to remove the iOS platform and I had and start over. I added cordova-plugin-wkwebview-file-xhr again and made sure I had:

    <preference name="scheme" value="app" />
<preference name="hostname" value="localhost" />

    in the config file and style rules showed as they should.