My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time.
While implementing scrollbars within the modals and ensuring they dynamically adjust in height with the browser window size, I came across a helpful example here:
After successfully incorporating this feature on my site, I faced an issue with Firefox compatibility. Despite working perfectly on Chrome, the scrollbar appeared incorrect on Firefox, with the height being only half of the browser's height. Interestingly, the modal functioned flawlessly on the codepen example but not on my website. It seems like there might be an element on my site conflicting with Firefox specifically, as Chrome doesn't seem to have any issues. I've dedicated hours trying to troubleshoot this discrepancy, but haven't been able to pinpoint the exact cause yet.
Could anyone identify a potential reason why the modal isn't functioning properly on Firefox when accessed through my website?
In terms of setup, I'm using Bootstrap 3.3.7 similar to the codepen example, along with the latest version of jquery. I even attempted different versions of jquery, but encountered the same Firefox-specific problem.
Below is a snapshot illustrating the issue in Firefox:
https://i.stack.imgur.com/FHmAV.png
And here's how it appears in Chrome (as intended):