So, this is an odd one: many users of my forum at http://asoiaf.westeros.org/ – across a range of devices and browsers – say that they often end up with a broken page, with a sidebar graphic in the wrong place and unclickable links. I suspect it has to do with an advertising unit on our site…
But I can’t replicate it – even with multiple browsers, multiple mobile devices, proxies to come from different regions to try and pull different advertising – and neither can the ad network (Tribal Fusion).
I have asked if anyone on the forum who has this issue also has enough web design knowledge to look at the output they have when it’s broken, but unfortunately that hasn’t quite worked out.
What extensions are they using? You’ll find that since that one person has all their devices screw up, it’s likely due to extensions.
Figure out the extensions they are using: that should be the first thing you should look at. What browsers are they using also? Same browsers / extensions across all devices?
Extensions – didn’t think of that. Although in some cases people are having them on mobile devices, and mobile browsers don’t have much room for extensions I think (well, maybe Chrome does, but pretty sure Safari doesn’t).
I mean, just some examples:
Person A: Windows OS, Chrome and IE, also Android (Chrome).
Person B: Windows 7 and Mac OS X, presumably with some variety of Chrome/IE/Firefox and Safari
Person C: Mac OSX, Windows 7 (Firefox), iOS 8 (Safari)
There’s no rhyme or reason to it near as I can tell. If only I could get it to happen, I’d be able to debug, but have spent the last few hours reloading and clicking around using a proxy to give a North American geo (as all the reports seem to be coming from there) and still nothing.
Get a test page without hte ad unit and see how your users react to that page. Have them all visit it. If it still happens, slowly remove content bit by bit until you deduce what is causing it.
The goal is to produce a minified test case. You’ll need your users to contribute since you can’t get it to reproduce.
ALso try renaming your ad unit class/ids. Some adware blocker extensions mess with that in pages; just a thought. Recently fixed an issue for my boss where CSS from adblockers was messing up a page. Try removing all mentions of “ad” from your page (ad, ads, etc)
So I used a different crossbrowser testing site to see if I could replicate the issue in a way where I could inspect the code… and I finally managed! Using a version of Chrome, a particular ad seemed associated with the problem. So I inspected elements, went around deleting all ads and other sidebar content, tweaked various CSS settings…
And discovered that nothing I could do could really fix it. It’s as if the rendering of the page is just plain “stuck” in pushing the background to the right with certain ads, and only a reload will fix it.
So, I’ve a theory: it looks like the issues is that the CSS element MainLeftFix and the fact that it uses Position:absolute to insert the background image as the final part of the rendering is being thrown off by something in the ad unit making it think that Left:0 is in fact 200 pixels in… and it stays that way, even after deleting the code related to the ads, and all other sidebar content besides.
Is it plausible that an ad could have this effect? Is there any way to prevent it by changing how our CSS is coded? I’ve heard that lag in rendering some elements can lead to weird final results, so I’m wondering if the issue may ultimately be that that particular ad unit is being served very slowly by the ad network, throwing off the rendering. Not sure how reasonable that is, though.
Could you give us the website cross browser site that you used? I want to replicate it on my own computer. You managed to get it to show so I want to do the same.
I had tried it yesterday, using the live tests, and no ads showed up that caused it. But today they sent an e-mail pointing out they can do automated tests that provide screenshots. Tried that and, voila, there was an ad in the rotation that was doing it, and then was able to replicate it with the live tests and started fooling around with inspect elements.
Unfortunately, have run out of demo time there, but if the ad network can’t solve things based on what I found there, I’ll have to sign up to do more tests.
If the problem is in the ad section then I would try the following code as a first step.
.SidebarAd{width:190px;overflow:hidden}
Even if the ad is pushing things wide the allocated space should be safe from the start. (if the ads are always the 600px height ones then set the height also).
I can’t reproduce the error here but slow networks can cause strange behavior like this so you have to make sure space is allocated and especially ensure that images have height and width attributes in the html.