Flag popup behind elements on beta site

steemit / condenser

The greatest application front-end to the Steem Blockchain.

https://steemit.com

505 stars 429 forks source link

Flag popup behind elements on beta site #3687

Closed officiallymarky closed 4 years ago

officiallymarky commented 4 years ago

on the beta site when flagging (potentially when upvoting) the panel falls behind the post elements from time to time. This only appears to happen on the beta site.

Gif of it in action https://i.imgur.com/HTdvG2H.gifv

gl2748 commented 4 years ago

@themarkymark-steem what browser are you using?

officiallymarky commented 4 years ago

Brave

gl2748 commented 4 years ago

I'm not able to reproduce on Brave.

In dark mode.
Click downvote on a post.
Submit vote on the drowdown that appears.
Click downvote on some other post.
Scroll so that the dropdown is not in view.
Scroll back up.
Expectation per the issue is that the dropdown will not appear behind the list of posts. However I have not been able to reproduce this...

roadscape commented 4 years ago

Please reopen if there are more details on how to reproduce.

officiallymarky commented 4 years ago

I have been able to reproduce it 100% of the time in both Brave and Chrome doing this.

https://i.imgur.com/8NlRDqV.gifv

The key thing seems to be moving the mouse to the left before actually submitting the flag.

gl2748 commented 4 years ago

Thanks @themarkymark-steem

gl2748 commented 4 years ago

Still not able to reproduce in dev environment.

Kapture 2020-02-11 at 9 49 11

jredbeard commented 4 years ago

@themarkymark-steem any chance you are using steemplus or any other chrome extensions?

Also unable to reproduce on my end...

roadscape commented 4 years ago

It looks like this specifically affects postlist items which are grayed out.

I scrolled down a bit on https://beta.steemit.com/@themarkymark/replies, and found a grayed out post (the middle one here):

This item consistently reproduces the behavior.

officiallymarky commented 4 years ago

I am typically seeing it when I am in the muted list. That might be part of the problem. I do not run SteemPlus, I can try safe mode if muted doesn't reproduce it.

roadscape commented 4 years ago

The issue is in:

.downvoted {
    opacity: 0.5;
    transition: 0.2s all ease-in-out;
    [...]
}

.downvoted:hover {
    opacity: 1;
    filter: none;
    -webkit-filter: none;
}

.downvoted is applied to the PostSummary container, which means the dropdown inherits opacity: 0.5, and z-index cannot bring it to top, seemingly because:

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it.

What we need is a CSS refactor to ensure downvoted is used consistently and it targets specific elements. (Currently, it's used for both PostSummary and Comment.) Since this bug does not critically impact UX, and condenser is in need of general CSS cleanup, I'm going to close this particular issue for now.