HTTPS source code has whitespace, but HTTP doesn't

Question

My problem is that the odd element on a site looks different when I view it using a HTTPS connection. When viewing source I've found that the https pages have some additional line breaks and white space etc. I need both to be the same. As an example, all tooltip icons in my nav bar have additional line breaks when I view a https page so they can be seen to visible jump left and right as you change pages - all because of the line breaks and whitespace.

According to the Chrome web inspector both http and https pages are being gzipped.

Can someone point me to a few things to investigate as I can't think?

Also, this may happen on other sites too. If you view the source of http://aws.amazon.com/cloudfront/ and https://aws.amazon.com/cloudfront/ then you can see additional line breaks. Neither the HTTP or HTTPS version is gzipped for that site though.

I'm sure an option would be to change the CSS/HTML but it's actually not really bad CSS/HTML and it would be so much easier if both HTTP/HTTPS did the same without having to add this extra check every time I write CSS/HTML.

I'm using Symfony2 (I have tested that this still happens outside the framework) so maybe I could get that to compress all whitespace instead. I have used the {% spaceless %} tag in my parent Twig template, but it doesn't remove all whitespace and it seems too much hassle to keep using these kind of tags.

Thanks for any help.

EDIT: Added image.

Answer 1

I've found the issue.

The network connection I'm using is compressing pages by removing line breaks from every site I visit (including the one I'm having an issue with as well as the AWS site example), but only does this on non-secure pages.

Adding a 'no-transform' cache-control header prevents this from happening.