The Simplest Solution
You often hear that the simplest solution is usually the answer. Well for me today I found that out.
I have been developing a website for a client which discusses advertisements that the clients offer as a service for their customers.
The project was going so smoothly. It was looking great on desktop and responsively. The browser testing requirements from the client where all working but there was an issue from the clients side. A single image wasn’t loading.
I just couldn’t work it out. Why this single image wasn’t loading. Other images were loading on the page just fine apart from this one. My first port to call was the to check my code which seemed to be fine. The next was to see which browser the client was using and started to test with that. The browser in question was Google Chrome. I tested it on my version and it seemed to work fine. The next step was to ask some colleagues if they could test it for me. One of my colleagues had the same issue the client was having. His machine became my new testing environment.
The website had a lot of scripts that were supplied from the clients. Many of which were tracking codes for the campaigns they would be sending. I noticed that the image that wasn’t showing had some inline-styles applied to it once the page had loaded. My initial thought was the scripts the client supplied may be applying these styles. Sadly this was not the case as I tried renaming my image class as well as removing the scripts temporarily.
After my own efforts it was time to ask the help of my fellow colleagues. After explaining the problem they were just as stumped as me. We thought it may have been the way Chrome likes to handle .scss files as they were on the server but this wasn’t the case either.
The problem in the end turned out to be ad blocker that was installed on the clients machine as well as my colleagues. You see the image that was displaying was name advert-logos.jpg and the class assigned to it was simply “adverts”. Now since they both used the word advert, ad blocker would automatically block it. This is where the mystery inline-styles were coming from.
Oh, the reason it wasn’t showing the issue in my version of Chrome was because I only use Chrome as a development environment and rarely use it for day-to-day websites.
It seems so simple now but at the time it seemed impossible to be honest. But I have learnt from it and feel that it has been a great day because of it.