Fixed Odd overlay issue. Member Card > Trophy Points

[Chris D]

I am getting this weirdness after a specific set of actions:



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.

 

[Paul B]

Doesn't do it on Chrome/Win 7 or Chrome/Android.

 

[Chris D]

In true, typical fashion, despite being able to replicate this twice while in this thread: http://xenforo.com/community/posts/596101/ I cannot replicate it again

 

[Jeremy]

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.

 

[Andrej]

Can't reproduce on Google Chrome 28.0.1500.71 on Mac OS X Mountain Lion 10.8.4 after several attempts.

 

[Chris D]

******* you overlays!

* Shakes fist

 

[Chris D]

This was annoying me. So I thought I'd try it once more, today.

I'm on Windows today. Still on Chrome:

 

[Chris D]

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.

 

[Paul B]

Still can't repro it in Chrome.

 

[Chris D]

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.

 

[Paul B]

Yes, confirmed - I can get it to happen in Chrome/Win now.

 

[Chris D]

Video is still processing, but just to avoid any doubt on how to replicate the issue:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[Martok]

I can confirm this too. Windows 7 / Chrome

 

[Chris D]

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]

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! it was driving me insane.

 

[Mike]

Looks like the events just made this run in slightly the wrong order, fixed now (locally).