6

Heavily downvoted answers are faded out in grey, to warn readers that the community did not like it, for whatever reason. If you mouseover it, it fades back to ordinary rendering, so you can read it, and if you mouseout, it reverts to the grey rendering.

I've noticed that on a comment underneath such an answer, the flag comment dialogue box is subject to the same rendering rules. This is a bit disconcerting, since if one mouses out of the answer, the flag dialogue box appears to be disabled, which spoils the UI experience. I don't think any dialogue box was meant to fade in or out in this way.

However, if one opens the flag dialogue against the answer itself, this does not happen, which is correct. There must therefore be something different between the two dialogues in terms of the CSS. Would a dev tag a look?

You can use this answer, currently at -8, as an example. Click the flag icon on the comment underneath and mousein/out on the answer.

I am using latest Firefox on GNU/Linux (Mint 17).

3
  • reproduced. also it become transparent. when mouse left, it is see through. but can't see an opacity property on it
    – Sagar V
    Commented Sep 27, 2017 at 12:47
  • I've found a random example with the data explorer: SELECT TOP 10 * FROM Posts WHERE ParentId IS NOT NULL AND Score <= -3.
    – halfer
    Commented Sep 27, 2017 at 12:51
  • Makes sense. The dialog is a child element of the answer. The answer is made transparent, so all it's children will be transparent. Not sure if this is easily fixable.
    – Cerbrus
    Commented Sep 27, 2017 at 13:13

1 Answer 1

0

I can reproduce this.

After some digging, I found that the downvoted-answer class is added to any heavily downvoted answer, and the following rule then applies:

.downvoted-answer .comments,
.downvoted-answer .post-signature,
.downvoted-answer .post-text,
.downvoted-answer .vote > * {
  opacity: .5;
  transition: opacity .5s;
}

The flag popup is a div with class popup popup-flag-comment, placed as a descendant of the div with class comments below the answer. The above rule applies to that div, as per the first selector of the rule.

The opacity directive is not inherited, but its effects are applied to all of its contents. This is why the popup is semitransparent, even though no rule directly targets it.

This is hence not a browser bug, but a bug in Stack Overflow. The easiest solution is to add the popup not as a descendant of the comments, but somewhere else, I think.


It seems that (temporarily) removing the comments class also fixes the issue. This makes it so that the comments are not faded out anymore, but it would make sense —at least to me— to have it that way while the popup is open.

4
  • "but its effects are applied to all of its contents": I don't think that's semantically correct, the opacity doesn't get applied to individual child elements, but to the parent element as a whole. Not sure what use this information is, though ;-)
    – Cerbrus
    Commented Sep 27, 2017 at 13:16
  • @Cerbrus I see your point and I agree, but I am not really sure what a better formulation would be. Do you have any suggestions? Commented Sep 27, 2017 at 13:17
  • Yea, no idea how to describe it better.
    – Cerbrus
    Commented Sep 27, 2017 at 13:17
  • Good sleuthing. Since the Flag Answer dialogue does not do this, I guess there must be something different there that prevents the behaviour. Thus, it must be possible.
    – halfer
    Commented Sep 27, 2017 at 13:18

Not the answer you're looking for? Browse other questions tagged .