fix: Rigorizing the isStuck logic in container use-sticky-header

[dpitcock]

Description

The previous isStuck logic was causing some unintended visual issues. When the isStuck condition was falsey set to true, it was removing the border radius on an internal element. This caused that element to overlay on top of its parent container, hiding the curved borders on the corners. This problem became more noticeable when the screen was viewed at different zoom levels.

The isStuck was being falsely set to true because why the top pixel values from sequentially calling .getBoundingClientRect() on a parent and nested child element might not return the same values, even if they are in the same position. Here are some reasons as to why:

• Timing issues: The .getBoundingClientRect() method returns the size and position of the element relative to the viewport, and this can change slightly between the two calls if the element is being scrolled or resized during that time. This is especially true if the function is being called on scroll, as the element's position may have shifted slightly between the two calls.
• Pixel differences and rounding: The values returned by .getBoundingClientRect() are in pixels, but there can be small differences in the decimal places due to browser rounding and the way floating-point numbers are represented in JavaScript. This can result in slight discrepancies, even if the elements are in the same position.
• Subpixel rendering: Modern browsers use subpixel rendering to improve the appearance of text and graphics on high-resolution displays. This can result in slightly different bounding rectangle values, even for elements that appear to be in the same position.

To mitigate the issue, I wrap the returned values in a Math.round() function as I noticed the differences were often in the .00001's of pixels. This seems to resolve the issue.

Related links, issue #, if available: AWSUI-60267

How has this been tested?

• unit test cases have been added for more conditionals
• integ passes test
• visual regression tests pass in dev pipeline

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.44%. Comparing base (03d0574) to head (a51ee04).
Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3239   +/-   ##
=======================================
  Coverage   96.44%   96.44%           
=======================================
  Files         791      791           
  Lines       22568    22568           
  Branches     7385     7385           
=======================================
  Hits        21765    21765           
  Misses        796      796           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.