Strange behavior in Safari

genemcc - October 9, 2008 - 16:45
Project:AddThis Button
Version:6.x-2.4
Component:User interface
Category:bug report
Priority:normal
Assigned:wesku
Status:postponed (maintainer needs more info)
Description

I have tried this in IE and Firefox and the dropdown appears right below the button as it is supposed to. However, in Safari (both Windows and Mac) the dropdown appears several inches to the right. In some themes it's off the page. I tried it with about 5 different themes - same result.

Is there a Safari fix? Thanks!

#1

wesku - October 12, 2008 - 09:44
Assigned to:Anonymous» wesku

I tested this quickly and it seems the problem only occurs when you have more than one button on the same page. First one of them is displayed correctly and rest of them are too far to the right.

As a quick fix I suggest using only one button for each page. I will have a look if this is something we can fix. It is possible that the problem is caused by addthis.com JS or CSS and we really can only report the problem to them.

#2

BrianDiesel - October 13, 2008 - 20:08

I've also noticed this problem I will report it to addthis.com

#3

Louis_Trapani - October 18, 2008 - 08:12

I have noticed the same issue with the drop down menu appearing a few inches to the right when click the AddThis button from within the Safari browser (v.3.1.2). Though it happens when I just have one button on the page. Since I don't use the AddThis button in the teaser, I don't know what happens if I had more than one button on the page yet.

It works correctly using the latest version of FireFox.

#4

wesku - November 16, 2008 - 13:39
Status:active» postponed (maintainer needs more info)

If you experience this kind of problems could you please try to repeat them by just using static html code from addthis.com: http://addthis.com/web-button-select.html

I would like to know if this is a bug with addthis.com css/js or if it is module related.

#5

danboland - November 18, 2008 - 21:24

For me, this bug only happens when you're logged into the site, whether you're using the Drupal module or manually pasting in the script and output. I tested this in Safari and Firefox and the same thing happened in both -- when logged in, the dropdown appears way off screen to the right (I can infer this by the way the scrollbars look), but when I'm an anonymous user, the dropdown functions properly.

Until this is fixed, if it gets fixed, I wouldn't recommend anyone use this service with Drupal.

#6

virago - November 19, 2008 - 20:05

The problem isn't caused by AddThis, or by the module itself I think. Using the AddThis button code that they provide on their page, it worked fine on Safari. Using the module however caused the popup window to open far to the right. I checked the differences between the 2 versions, and the only thing I noticed was that the module version wraps the button in a layer. The CSS of the layer has relative positioning, and it looks like safari positions the layer relative to the wrong element.

Changing the CSS (addthis.css in the module's directory) fixed it in Safari and Camino at least, haven't tried other browsers yet.

My CSS looks like:

.addthis {
display:inline;
}

.addthis img {
vertical-align: bottom;
margin-bottom: 2px;
}

#7

wesku - November 19, 2008 - 20:21
Status:postponed (maintainer needs more info)» needs review

Thank you for this, I have commited your fix to the CVS. Please test this with different browsers and let me know if the problem has finally been fixed. Latest dev version for 6.x branch now contains this change.

#8

virago - November 19, 2008 - 23:07

Just tried it in ie7, but it's offset to the right there. Using Garland theme, there's a large offset, using Pushbutton there's only about 20-25 pixels offset, using Bluemarine it works fine across all browsers. So it seems it also depends on the theme being used.

Interestingly though, when I just paste the code from the AddThis site into a template file, I get the same problem in IE7, the popup is offset by quite a few pixels to the right (in Garland anyway.)

Also, using the original CSS with the relative position didn't work for me in IE7 either.

I think the problem is more a theme CSS issue than an issue with the module or the AddThis service, but as I'm fairly new to Drupal and haven't done much template hacking for it yet, I'm not sure what is causing Garland to show this problem.

#9

Johnl - November 21, 2008 - 14:03

I was also experiencing this issue with IE6. Safari, Firefox, and even Google Chrome all worked fine for me. I changed the CSS like you guys suggested and it all works now.

Thanks, you guys are awesome!

#10

wesku - November 22, 2008 - 16:30

Thanks for you feedback. Please keep testing it so that we can fix this for good. I don't even have IE anywhere and I'm a bit clueless about CSS stuff in general... Any help on this issue is really appreciated. :-)

#11

wesku - February 15, 2009 - 17:50
Status:needs review» postponed (maintainer needs more info)

Please check if this also happens with latest 6.x version. An extra div has now been removed around the button. This div was causing problems with HTML validators, so it had to be removed. Also theming is now supported if you want to do some sort of special display for the button.

 
 

Drupal is a registered trademark of Dries Buytaert.