Assets not loading on Elastic Beanstalk in Safari

I’ve been having an issue.

I use Elastic Beanstalk for deploying most of my applications – it’s a layer over the top of Amazon’s EC2 service that handles a load of the complexity for you. I simply define which platform I want (Ruby 2.3 with Puma), define any components that need to be installed on that server, configure the application using environment variables and then specify which scaling model I want to use (for example, add new servers if the average latency is greater than half a second). Really easy to use, once you get your head around it.

But recently, I’ve had this intermittent problem.

The site I deploy works great in Chrome. And Internet Explorer. And Firefox.

But on Safari, it was completely style-free.

You can see the site in Chrome and Safari here – Chrome looks OK (as far as the basic styling goes), but Safari looks awful.

Screen Shot 2016-08-10 at 09.52.59

First thing to do in this situation is to dive in to the Inspector (continues below).

Do you know what to do but not how it works?

Ever wanted to understand why Rails views work the way that they do? Why variables from your controllers are visible inside your views?

Sign up below to get a free 5 part email course on how Ruby on Rails view rendering works and gain a deep understanding of the Rails magic.

We will send you the course, plus the occasional update from this web-site. But no spam, we promise, and it's easy to unsubscribe

Checking the HEAD element shows the link to my asset-pipelined stylesheet – and if I click on it, the stylesheet loads in its uglified glory.

Screen Shot 2016-08-10 at 09.57.59

So why wasn’t it loading?

If you look back to that first screenshot you can see that in Chrome, the stylesheet is appearing under the list of “sources” – that is Chrome is making a network request to load that file. But in “resources” in Safari, there are no stylesheets at all – Safari isn’t even requesting the file. Even though it’s in the page source.

What is happening?

I emptied caches. I changed the assets version (in config/initializers/assets.rb). I flicked v-signs and shouted at my computer screen. None of these helped (well, the v-signs helped a bit).

I tried to think of what could be different between the two browsers (three as I also tried it in Firefox).

Chrome is my development browser. When I’m working on stuff I load it into Chrome.

Safari is my personal browser. When I’m browsing stuff I load it in to Safari.

And then it hit me.

Safari has “Ghostery” installed. This is an ad-blocker that I run because I’m sick of interstitials and intrusive adverts getting in my way and burning up my battery. Chrome and Firefox do not have Ghostery installed as I don’t tend to do much general browsing in them.

So I hit the Ghostery button – and sure enough – there’s an “Elastic Beanstalk” script associated with that page. I have no idea what it is or what it does – but as soon as I whitelisted it, the stylesheet loaded OK and everything went back to normal.

Screen Shot 2016-08-10 at 10.15.11

So does anyone know what this mysterious Elastic Beanstalk script is – and why it’s being injected into all of my applications?

Do you know what to do but not how it works?

Ever wanted to understand why Rails views work the way that they do? Why variables from your controllers are visible inside your views?

Sign up below to get a free 5 part email course on how Ruby on Rails view rendering works and gain a deep understanding of the Rails magic.

We will send you the course, plus the occasional update from this web-site. But no spam, we promise, and it's easy to unsubscribe