Context:
Timeless has some custom JS that wraps tables in a container and tracks when the table's width is larger than the container (and thus "overflowing" in order to make it scrollable. The width comparison is done using jQuery's .outerWidth which for reasons unbeknownst to me (in our jquery v3.7.1 on line 6907 there's probably a suspect part which mentions compatibility with Safari 8+) has a discrepancy in how it rounds the width of the outer element on Safari. This leads to a scrollbar displaying below certain tables, which looks silly:
In Safari, I get these results:
> document.querySelector('.content-table > table').offsetWidth < 948 > $(document.querySelector('.content-table > table')).outerWidth() < 948 > document.querySelector('.content-table-wrapper').offsetWidth < 948 > $(document.querySelector('.content-table-wrapper')).outerWidth() < 947.859375 // wat
While in Firefox I get these results:
> document.querySelector('.content-table > table').offsetWidth < 948 > $(document.querySelector('.content-table > table')).outerWidth() < 947.8 > document.querySelector('.content-table-wrapper').offsetWidth < 948 > $(document.querySelector('.content-table-wrapper')).outerWidth() < 947.8
To reproduce this I used this wikitext, based on noticing this issue in this template:
{| style="width: 100%; background-color: red;"
| example
|}For whatever reason some specific resize is needed to trigger the calculation and I found that while this happens naturally to me on Commons (probably due to various gadgets on Commons—though it reproduces logged out in Commons for me), when I was local I had to append ?debug=true to make it reproduce. I don't know why that works either.
