Stretched-link not adhering to containing block on MacOS & iOS; breaks scroll on responsive table

[Brittany Rapheal]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I have a responsive table, and each row has a td with a stretched link inside of it. I added the class .position-relative to each tr, so it could be the containing block for each rows' stretched link.

Functionality works as expected on my laptop (MacOS) in Chrome and Firefox.

On Safari (both MacOS and iOS), the last row's stretched link stretches its link around the entire container instead of just its encompassing tr. On mobile, this also affects the responsive table's ability to scroll.

Reduced test cases

Here's a CodePen I put together to show the issue.

I found out that if I add position: relative; to the stretched link's parent td, it contains it. It just doesn't seem to work if the containing block is a grandparent element. The temporary "fix" I'm using is detecting if the user is browsing on Safari (via JS) and adding the position: relative; css to the parent td for the link. While that works, it's not the functionality I'd prefer.

What operating system(s) are you seeing the problem on?

macOS, iOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

v5.3.2

[Cyril Krylatov]

Hello, it's not Bootstrap-related as Safari don't like position: relative on TR element. You can read some things here: w3c/csswg-drafts#1899

To manage that, I've always managed it with full JS, without tr.position-relative nor a.stretched-link:

• onclick event on the table (for event delegation issues)
• target.closest('tr').querySelector('a').click()
• cursor: pointer on the table (or tbody > tr)

and that's it.

That's not an enjoyable solution but heh, my line is clickable on all the browsers with that.

I hope it helps!

[Louis-Maxime Piton]

Hello,

As said by @CyrilKrylatov, it's not Bootstrap related and I don't think we can do something on our side.
There are only tricks to achieve what you're trying to do on Safari. What was said inside this PR is good already, don't forget about keyboard users. If you want to dig some other solutions, I've seen that a discussion has been started on reddit to see if there was any way to do it properly in an accessible way.