Stretched link extending beyond containers

[thehitechpanky]

• Operating system and version (Ubuntu)
• Browser and version (Chrome)
  Stretched link not working as expected. For example, in case of Some text it makes whole row link instead of a single cell. It should make immediate container link and not parent of parent.

[ffoodd]

You're probably missing a position: relative (using .position-relative helper class) on your container.

This is very well explained in the stretched link utility documentation.

[thehitechpanky]

You're probably missing a position: relative (using .position-relative helper class) on your container.

This is very well explained in the stretched link utility documentation.

The documentation is not clear for usage in tables. Whether, we have to add position-relative class in link itself or in containing cell or row or table?

[ffoodd]

@thehitechpanky Usage in tables do not differ from others. And as mentionned in the documentation:

Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable.

So you need to put .position-relative class on the element you want to be clickable. That's all, and clearly described :/

[masoudd]

Take this case for example:
https://codesandbox.io/s/withered-frost-nq91i
It works on firefox but not on Chrome. On Chrome the whole page becomes clickable leading to the latest element with .stretched-link
I get the same bug with Chrome on android and windows10. It works correctly on Firefox on windows10, archlinux and android.
Similar report on stackoverflow

@ffoodd Should I open a new issue?

[ffoodd]

Well, that's a known bug in Blink.

A few searches made me find a related CSS WG issue about a previous version of the spec mentions an interesting workaround: using something like transform: scale(1); solves your test case, because it creates the containing block position: relative should but can't. You may also try perspective.

@mdo @MartijnCuppens should we mention this in our docs?

[MartijnCuppens]

Wow, I wasn't aware of the transform: scale(1); hack. This is a duplicate of #28608 btw