On my new website http://c4g.live/ I am using bootstrap v3 and modals to display more information on each game server that gets queried. Each modal contains the individual servers current players, their score and their play time.
I was looking for a way to get the modal to have scrollbars and also dynamically change height with the size of the browser window. I found this great example here: https://stackoverflow.com/a/32871535
I implemented this into my site and it works perfectly on Chrome, but on Firefox it does not work correctly. I get the scrollbar, but the height isn't right, its about half the height of the browser. However, on the codepen example website for that solution the modal seems to work properly in Firefox, just not on my website. I suspect something on my site might be interfering with it that Firefox doesn't like, but Chrome ignores. I have spent hours trying to figure out why, but I cannot seem to find any reason for it.
Does any one see any obvious reason this might not be working correctly in Firefox on my website?
I am using Bootstrap 3.3.7 which is on the codepen example website, and I put in the latest jquery. I tried previous versions of jquery as well and it was all the same.
Here is a picture of what it is doing in Firefox for me
Here is a picture of what it does in Chrome (which is correct)