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 is not 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 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)?
Thanks in advance for any help you can give.
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.
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'application', debug: false %>