Some stylesheets missing in Edge Inspect when testing Rails app

StackOverflow https://stackoverflow.com/questions/23268547

Question

I am using Edge Inspect to work with a Rails site on an iPhone.

When I browse to the live site it works fine, but when I browse to the development version some CSS files do not appear to have been loaded. I.E. The page displays without the styles from those CSS files.

However, it does display with the styles from other CSS files defined in exactly the same way! So this does not seem to be about relative vs absolute URLs or ‘localhost’ vs IP address on the network.

Given that the production version (on a real domain) displays fine via Edge Inspect, is it possible that Rails development behaviour is messing up Edge Inspect? In development, Rails creates <link...> tags for every CSS file, whereas in production it concatenates and minifies them.

As an aside: this whole issue is tricky to debug because I don’t see any CSS <link...> tags in the <head> when I inspect the page on the device. That includes the ones which are being applied, so I don’t get where the styles are coming from at all. Is this a foible of how Edge Inspect works? Just on iPhone (5S)?

Anyone seen anything like this?

Was it helpful?

Solution

I solved it!

Turns out my hunch was correct – either Edge Inspect or the iPhone is choking on the large number of individual CSS files.

By changing the relevant stylesheet_link_tag I was able to get it working.

From:

<%= stylesheet_link_tag 'application' %>

To:

<%= stylesheet_link_tag 'application', debug: false %>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top