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

Fixed Odd overlay issue. Member Card > Trophy Points

Chris D

XenForo developer
Staff member
#1
I am getting this weirdness after a specific set of actions:

upload_2013-7-29_22-12-9.png

This is on Chrome 28 on OS X Mountain Lion.

I took these steps:
  • Clicked my avatar in the quick reply area to bring up my own member card.
  • Clicked the trophy points number to load the trophies overlay.
  • Clicked outside of the overlay (I did not click the Close button).
  • Clicked my avatar again.
  • Clicked the trophy points number again.
 

Jeremy

Well-known member
#4
If it makes you feel any better, this happened on a Followers overlay for me once or twice and just like you, I couldn't replicated it again.
 

Chris D

XenForo developer
Staff member
#8
I can replicate this more reliably now... I think...

Slightly different:
  1. Bring up your member card from any one of the posts in this thread.
  2. Open the trophy points overlay.
  3. While the overlay is still open -- this is the important bit -- scroll down to the editor.
  4. Close the overlay any way you like.
  5. Click on your avatar in the quick reply area.
  6. Open the trophy points overlay.
  7. The above screenshots should resemble what happens.
I think the important factors are that it is an overlay which has previously been opened, cached and closed, and you're scrolling down the page so when the cached overlay opens, it's opening above an element that wasn't on the screen previously.

This is pretty edge case stuff, I guess, but as you can see if it does happen, it's not pretty.
 

Chris D

XenForo developer
Staff member
#10
I can see the cause now.

The div with the class "xenOverlay"...

When that overlay originally loads, its given z-index: 9999.

When the overlay closes (and caches), the z-index is changed to auto.

When the overlay loads again, the z-index remains at auto. Presumably because it's cached and it effectively just unhides itself. The function that unhides a cached overlay should set the z-index back to 9999.

That fixes the issue.
 

Chris D

XenForo developer
Staff member
#14
I can replicate this more reliably now... I think...

Slightly different:
  1. Bring up your member card from any one of the posts in this thread.
  2. Open the trophy points overlay.
  3. While the overlay is still open -- this is the important bit -- scroll down to the editor.
  4. Close the overlay any way you like.
  5. Click on your avatar in the quick reply area.
  6. Open the trophy points overlay.
  7. The above screenshots should resemble what happens.
I think the important factors are that it is an overlay which has previously been opened, cached and closed, and you're scrolling down the page so when the cached overlay opens, it's opening above an element that wasn't on the screen previously.

This is pretty edge case stuff, I guess, but as you can see if it does happen, it's not pretty.
The bit I highlighted in red is actually not important at all.

Scrolling doesn't matter.

It's just relating to the z-index CSS and cached overlays, I think.
 

Jeremy

Well-known member
#15
I can see the cause now.

The div with the class "xenOverlay"...

When that overlay originally loads, its given z-index: 9999.

When the overlay closes (and caches), the z-index is changed to auto.

When the overlay loads again, the z-index remains at auto. Presumably because it's cached and it effectively just unhides itself. The function that unhides a cached overlay should set the z-index back to 9999.

That fixes the issue.
Very good debugging here! (y) it was driving me insane.