• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Won't fix Member card JavaScript error

Arty

Well-known member
#1
While customizing member card layout I've ran into a bug in XenForo JavaScript. If class .xenOverlay.memberCard does not have a background image, when showing member card XF creates invalid image behind member card:

HTML:
<img src="non" style="border: 0px none; width: 612px; position: fixed; top: 113.1px; left: 412.5px; z-index: 9999;">
How to reproduce it in custom style:
1. Open member_card.css, change background for .xenOverlay.memberCard to semi transparent color without image.
2. Open any user's card in browser, you'll see invalid image frame behind member card.

How to reproduce it in default style by messing with css:
1. Open any user's card in browser, inspect its background using Firebug or browser's inspector.
2. Using firebug or browser tools change css for .xenOverlay.memberCard to something like this: background: rgba(0, 0, 0, 0.5);
3. Open some other user's member card. You'll notice broken image behind it.
 

digitalpoint

Well-known member
#3
There isn't a whole lot that can be done about it... I ran into this myself and it ended up being how jQuery Tools works when using the Apple Effect for it's overlay (you HAVE to have an image for whatever reason). Ultimately it's a jQuery Tools issue though.
 

ManOnDaMoon

Well-known member
#4
The image source, "non", is curious though. Is it what jQuery outputs if XenForo does not provide any image source? Maybe setting a fallback transparent image would do the trick, either in our CSS or in XF js script?
 

digitalpoint

Well-known member
#5
Yeah, I don't really know... I just recall thinking how stupid jQuery Tools was that the Apple Effect *required* an image for whatever reason.
 

Chris D

XenForo developer
Staff member
#6
I came across this today while working on a new add-on that requires an overlay similar to that of the avatar uploader.

My workaround was as follows:

Code:
.xenOverlay.avatarEditor
{
	width: 720px;
	background-image: url(rgba.php?r=0&g=0&b=0&a=0);
}
This uses rgba.php to set a completely transparent background image so it satisfies the requirement of having one, without actually having one.
 

Marcus

Well-known member
#7
Maybe it is relevant to the issue here: My member cards don't work with anything other than jquery 1.5.2. I uploaded 1.6, 1.7 and 1.8 releases of jquery and all of them displayed me a buggy member card.
 

Chris D

XenForo developer
Staff member
#8
Why are you using different versions of jQuery?

XenForo was written for jQuery 1.5.x. Unfortunately jQuery often doesn't retain backwards compatibility.

You'll probably find a hell of a lot more broken.
 

Marcus

Well-known member
#9
I thought using a more actual jquery would be more stable, but I was unaware of the backward incompatibility. I moved back to 1.5.2.
 

TrevC

Well-known member
#10
Sure glad this shows up in Google results :)

Does this disappear if the "apple effect" is disabled? I can't remember where to turn it off.
 

TrevC

Well-known member
#11
Since the member card is always displayed along with the #exposeMask overlay, you can actually (visually) correct this bug without PHP:
Code:
#exposeMask ~ img{display: none!important;}
 

Mike

XenForo developer
Staff member
#12
I was going to suggest the same workaround Chris Deeming posted: use a transparent image. It's just the way the apple effect works. Maybe the approach here will be changed in the future.
 

The Dark Wizard

Well-known member
#13
I came across this today while working on a new add-on that requires an overlay similar to that of the avatar uploader.

My workaround was as follows:

Code:
.xenOverlay.avatarEditor
{
width: 720px;
background-image: url(rgba.php?r=0&g=0&b=0&a=0);
}
This uses rgba.php to set a completely transparent background image so it satisfies the requirement of having one, without actually having one.
This does not seem to fix it.
 

Chris D

XenForo developer
Staff member
#14
Hmm. It's occurred for me several times and it has worked every time.

Try using !important in case it is being overridden elsewhere.