10

There is a usability problem when you visit a site on which ads are being served. The top banner ad doesn't render immediately, and then when it does, it causes the rest of the page below it to jump down by just about the amount that e.g. attempting to click on the downvote arrow ends up clicking on the upvote arrow.

This is easy to fix if you notice, but if you were planning to click somewhere else, you will miss by rather a large distance. This is annoying and hardly serves any useful purpose, and in the worst case could lead to you clicking on something you really didn't want to click.

I don't know enough about the underlying technology to propose a fix, but a thing which used to work already in the 1990s was to reserve space for an image if you could tell in advance how large it was going to be. Banner ads typically have this property, and so I'm imagining this should be possible. Examining the page source reveals an iframe element with width="0" and height="0" attributes which seems like precisely the wrong thing here, but like I said, I probably don't understand this well enough.

Frustratingly, the image block my browser offers doesn't help at all; the jump happens even if the image is not displayed (at least in Chrome on Mac).

Some sites which have this annoying behavior are Drupal and Ask Different but it depends on your privileges on these sites and ads are not served 100% of the time even then.

The particular use case for me is to flag obvious spam quickly; I basically never do anything else on the Drupal site, for example, and so probably will never earn enough rep there to not see the ads. When spam is dead obvious, you really want to be able to just flag it and move on.

  • 3
    +1, I run into this several times per day. Typical spam has a link at the bottom of a wall of text. The distance between that link and the flag links happens to be about the same size as the banner ad. If you hover over the flag link before the ad loads, then click after the ad has loaded, you have just clicked on a spam link. This is a serious problem; I don't want to be visiting spam sites. – angussidney Jan 17 '17 at 8:27
  • 2
    Several commenters in chat brought up ad blocking, so just for the record, I don't particularly want to block Stack's ads, and I imagine Stack Exchange definitely would like to avoid people blocking ads because the rendering is annoying. – tripleee Jan 17 '17 at 8:38
  • 1
    I think this is a reasonable request. I've put it on a list of things for my team to investigate. We're a bit short-handed this month, so I can't promise anything, but I can relate to the frustration. – Bret Copeland Jan 18 '17 at 21:40
  • I used to have the extra ads enabled as a logged in user to support SE and seem some relevant ads but this constant annoyance on every page load is not worth it, ads completely disabled and blocked now. – Mani Gandham Feb 22 '17 at 19:41
8

I just pushed a small CSS fix for this that gives explicit dimensions to the leaderboard ad elements. This should prevent reflows in the main Q&A section of the page.

Unfortunately we can't really eliminate reflows in the sidebar section, as our job ads and company page ads have variable heights.

This should make it's way to production soon.

  • 7
    Can you revert this change? It shows empty page headers to everyone now. – Patrick Hofman Apr 5 '17 at 7:31
  • It even shows empty spaces if I visit sites where I am not logged it, and I have my ad blocker turned off, it should only allocate the empty space if an ad will be placed in that box. But I appreciate it that you try to make stackexchange a better place for the people without adblock – Ferrybig Apr 5 '17 at 15:36
10

Being part of the same spam-fighting squad as you, I ran into the same problem and wrote a userscript a week ago which helps hiding the banners, and prevents the page jump:

// ==UserScript==
// @name        Hide ads
// @namespace   http://www.project3851.com/
// @description Hides advertisements so that the flag link doesn't jump while loading the page
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.superuser.com/*
// @match       *://*.serverfault.com/*
// @match       *://*.askubuntu.com/*
// @match       *://*.stackapps.com/*
// @match       *://*.mathoverflow.net/*
// @exclude     *://chat.stackexchange.com/*
// @exclude     *://chat.meta.stackexchange.com/*
// @exclude     *://chat.stackoverflow.com/*
// @exclude     *://blog.stackoverflow.com/*
// @exclude     *://*.area51.stackexchange.com/*
// @version     1
// @grant       none
// ==/UserScript==

var link = window.document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'data:text/css,' +
            // Selectors start here
            '.adzerk-vote { display: none; }'
document.getElementsByTagName("HEAD")[0].appendChild(link);

Source available on GitHub | Direct install link

  • Thanks. I'm still hoping that the Stack powers that be would fix this for everyone, but I'll probably end up accepting this if they don't. – tripleee Jan 17 '17 at 8:22
  • 1
    FWIW, installing NoScript and not allowing JS from adzerk.net also has the same effect: no ads on SO, and thus no jumping content either. As a bonus, using NoScript also makes you much less likely to catch anything nasty if you do accidentally click on a spam link. – Ilmari Karonen Feb 21 '17 at 23:42

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .