Bootstrap 5 stretched links not working for some recurring elements on mobile only

Question

I have a table with a few hundred rows generated by a recurring PHP script. With Bootstrap 5, I use a stretched link to make the entire row of the table clickable. This works exactly as expected on desktop, and using Chrome's dev tools to mimic a mobile device. However, when accessed from an actual mobile phone (tested from two devices), the first 9 rows of the table don't have the link associated with the row in question, but instead of the last row in the table. All remaining rows in the table act as expected. How can I troubleshoot this, as the issue doesn't show up when using dev tools on the web browser? For reference, recurring code snippet is below. All content is plain text with no special characters.

Edit: I've determined it only doesn't work correctly for those elements visible at the time of the page load. So everything "below the fold" works as expected. The inaccuracy of position-relative appears to be a known bug in bootstrap.

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="link" class="stretched-link text-reset text-decoration-none">Content</a>
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

Answer 1

From my experience having a similar issue as this one in the past.

I changed the position of the <a> tag to sit directly in the row before the columns then I used stretched-link to make the row clickable.

You can have two links.

One after the row (which is the container <div> tag after <td> in your code) and another where you initially linked it but remove stretched-link this time.

This worked for me in the past. See code below:

<tr class="position-relative">
    <td class="position-static">
        <div class="container d-flex align-items-center">
        <a href="link" class="stretched-link text-reset text-decoration-none"></a><!-- New link with out text -->
            <div class="expansion-icon d-inline-block me-1">
                <img class="img-fluid" src="img-source">
            </div>
            <div class="expansion-link d-inline-block">
                <a href="link" class="text-reset text-decoration-none">Content</a><!-- Remove stretched-link here -->
            </div>
        </div>
    </td>
    <td>Content</td>
    <td>Content</td>
</tr>

Answer 2

This seems to be a known issue with Bootstrap. There was an open issue at one time (https://github.com/twbs/bootstrap/issues/28608) however it is now closed, yet doesn't appear to be fixed.

My experience has been that stretched links associated with do not work for items in the viewport when the page is loaded on mobile browsers (tested with Safari and Chrome for iOS). Items outside of the viewport work as expected.