AddThis _atssh div causing issues

I’m using AddThis in the new CSlide site, and it seems to add a div (id=”_atssh”), immediately after the link to the AddThis JavaScript file. This happens even if you have the JS file in the <head> section of the page, resulting in a div in the head, which clearly isn’t right. A quick search on the AddThis site suggests I am not the first to come across this issue, but it would appear the promised fix has not happened yet.

This can be fixed by putting the link to the JS file in the body (ideally at the end, for the sake of performance/progressive rendering*). However, having this div inserted at the end results in the size of the page height being increased by 1 pixel. Since, in my site anyway, it comes after a container with height set to 100%, it results in the page having a scrollbar when it shouldn’t need it.

Again, this can be fixed relatively easily, by adding the CSS below to your stylesheet. The offending div is invisible, so making it absolutely positioned (it used to already have position: absolute, but this seems to have changed (as at 6/01/2015)) and setting “top” to 0 just sticks it at the top of the page where it can’t interfere any more.

#_atssh {
    position: absolute;
    top: 0;
}

*I should mention that my JS was already at the end, and I only found out about the “div in the head” issue when looking into the page height issue.

Leave a Reply

Your email address will not be published. Required fields are marked *