2

I encountered the following strange situation that I recreated in the following example:

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 50%;
    top: 100%;
}
a:active {
    filter: brightness(130%);
}
<div class="relative">
    <a href="//google.com"><img class="absolute" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG/130px-Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG" /></a>
</div>

On click mousedown event triggers :active pseudo class having that filter property while the image loses it's absolute position and as a result the link is not even followed. I couldn't find anything about it anywhere, does anyone know why this is happening?

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
Sorin GFS
  • 477
  • 3
  • 18

1 Answers1

1

I don't understand the exact reason for it either. However, what you want to be doing is applying the filter to the img not the tag. Perhaps the behaviour is undefined on an tag:

.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 50%;
    top: 100%;
}
a:active img {
    filter: brightness(130%);
}
<div class="relative">
    <a href="//google.com"><img class="absolute" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG/130px-Sternbergia_lutea_showing_the_different_parts_of_the_flower.JPG" /></a>
</div>

That fixes it.

see sharper
  • 11,505
  • 8
  • 46
  • 65
  • Thank you, I know how to avoid this situation, but the question remains...My example was random, it happens in various different situations. And I don't think is normal... – Sorin GFS Jan 21 '21 at 00:57
  • 1
    Hmm, so it turns out this is a duplicate. Answer is here: https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning – see sharper Jan 21 '21 at 01:24
  • should I delete the question? (I'm not familiar with procedure in this situation) – Sorin GFS Jan 21 '21 at 01:44
  • No need - it's now closed as a duplicate. That's better than deletion since someone might find your question rather than the previous one. – see sharper Jan 21 '21 at 01:49
  • Ok, thank you for info. – Sorin GFS Jan 21 '21 at 01:50