Won't fix Member card JavaScript error

Arty

Well-known member
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.
 
I was able to reproduce on my XF installation by reproducing Arty's steps.
capture2-png.32606
 
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.
 
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?
 
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.
 
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.
 
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.
 
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.
 
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.
 
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.
 
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;}
 
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.
 
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.
 
Hmm. It's occurred for me several times and it has worked every time.

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