Why doesn't the .tab-view element with position: sticky property work correctly on iOS and Safari desktop browsers when it is inside a position: absolute container with overflow: scroll? Can you help me understand this bug and find a solution?

The issue you are experiencing with the `position: sticky` property not working correctly on iOS and Safari desktop browsers when inside a `position: absolute` container with `overflow: scroll` is actually a known bug in WebKit (the rendering engine behind Safari).

The problem arises when you combine a `position: sticky` element with a parent container that has `position: absolute` and `overflow: scroll` properties set. In this scenario, WebKit does not properly calculate the position of the sticky element when scrolling.

Unfortunately, there isn't a straightforward solution to this bug. However, there are a couple of workarounds you can try to achieve a similar effect:

1. Removing `position: absolute` on parent container: If possible, you can remove the `position: absolute` property from the parent container. This may affect the overall layout of your design, but it could help resolve the issue with the sticky element.

2. Using JavaScript/jQuery: Another workaround is to use JavaScript or jQuery to calculate the scroll position and manually set the position of the sticky element. You can listen for the scroll event and update the CSS properties of the sticky element accordingly. Here's a basic example using jQuery:

```javascript
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var parentOffset = $('.container').offset().top;
var stickyOffset = $('.sticky-element').offset().top - parentOffset;

if (scrollTop >= stickyOffset) {
$('.sticky-element').addClass('sticky');
} else {
$('.sticky-element').removeClass('sticky');
}
});
```

In this example, we calculate the scroll position (`scrollTop`) and the offsets of the parent container (`parentOffset`) and the sticky element (`stickyOffset`). Then, based on the scroll position, we add or remove a CSS class (`sticky`) to toggle the sticky behavior.

Remember to adjust the selectors (`'.container'` and `'.sticky-element'`) to match your specific HTML structure.

These workarounds should help you achieve a sticky effect even in iOS and Safari. However, keep in mind that these solutions may have limitations and may not be as performant as native `position: sticky` support. Make sure to test them thoroughly in different browsers and devices to ensure they work as expected.

Always stay up to date with the latest browser updates and bug fixes, as this issue might be resolved in future releases.