CSS does not render on ios. *.chunk.css files invalid?

[laran]

When I load my app in chrome on my iPhone the content shows but the CSS does not load. I googled for what might cause this and it sounds like similar issues can be caused by invalid css. I used a css validator and put in my home page to have it validate, and sure enough, it found a lot of parse errors when validating the .chunk.css files that are generated during npm run build.

Is this a known issue? What can I do about this?

[bugzpodder]

Please fill in the issue template and if possible provide an app illustrating this.

[rlueder]

@laran I'm seeing the same issue you're having also on Chrome and Firefox for iOS as well as Chrome, Firefox and Safari on macOS.

I'm serving the app from the build folder using serve -s build as I had always done. After upgrading to CRA 2.0 the assets won't load on any browser. Styles load as expected on development environment, after some searching on existing issues the issue seems related to code splitting on CRA 2.0 (#5513 and #5306)

[UPDATE] I created a very basic app using CRA, made a small CSS change (background color to red) then built it and served as described above, styles loaded with no problems. I'll keep trying to reproduce it...

[UPDATE] I was able to get the styles to load in my app after removing any references to a custom webfont my app was using, the font assets were under /src/assets/fonts/[fontFamily]/

As a test I added a custom font to the simple app mentioned above but could not reproduce the issue, the styles from the simple test app load as expected (including the font).

The reason I tried removing any references to the fonts in the first place was this line on asset-manifest.json that didn't seem quite right:

"static/media/styles.scss": "./static/media/DINWebPro-Light.cbaf288b.woff"

@laran do you have webfonts bundled with your app? Would you mind removing them and checking if the styles load as they did in my case? I think I'm on to something but not quite sure what to try next.

[peterbe]

@laran Do you use a CSS framework like Bulma or something like that? Can you deduce if your .css files, outside the scope of CRA, are validating correctly?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.