I’m having issues with serving a website on mobile devices, as the whitespace (including new lines) is stripped from the HTML.
This is a problem, as it shifts the positions of the inline-block elements. (see here for information on the issue).
Eventually I resorted to a workaround (got rid of whitespace between inline-block elements in the first place, and then adjusted CSS positioning), but now I want to figure out why this is happening.
Website details:
- Platform: Ruby On Rails 3.2.11 (MRI 1.9.3)
- Template Engine: ERB
- Rack Server: Thin (1.5.0)
- Host: Heroku (Cedar)
Since I am not even sure if this is a rails/rack/heroku related problem, I created a dummy duplicate:
- Copied the rails-generated HTML to a static
*.htmlfile (and adjusted CSS and JS links) - uploaded that file on another machine (Apache), to serve it as a static HTML file
And I did some tests. Well… the results are (almost) the same.
If I send GET requests with curl, I get what I described above for both websites (the dynamic rails application and the static HTML file):
- using my landline connection I get the full “raw” HTML, with whitespace, newlines and indentation.
- using my carrier 3G connection (in tethering), I get the HTML code stripped of every whitespace, just like minified CSS or JS. (btw, the same happened when I double-checked with any other website, from google.com through xkcd.com)
YET, when browsed with my mobile, everything is rendered normally on the dummy static one.
I honestly can’t figure out where the problem is. Since curl always gets minified HTML on 3G, I’d think the problem is on the network. Yet, the smartphone only complains when the page is served by Rails.
Has anyone ever encountered this issue?
I checked your blog entry. Using spaces to format you layout or using is the wrong approach and will never be reliable. if you really have to then use non breaking spaces in html.
It is far better to put classes on your elements and then use CSS to set margins and padding. Your workaround was in fact the correct thing to do.