Elm Bootstrap. Fixed aspect ratio broken in Safari

I’ve built a simple Othello/Reversi app as a front end to a machine learning project I’ve been doing to implement an Othello playing bot. I’m not a front end dev, but I know a lot more about it now than I did a week ago :).
I want the Othello board to be based on the size of the browser and responsive to both width and height of the browser. This is a compromise that I think is needed since I want it to be playable on a small screen (phone) as well as a large screen. Width was easy, in fact it seemed to be the default behavior, but it took a bit of css research to figure out how to make height responsive. The problem is that while my solution works with Chrome, Vivaldi, and Firefox, it doesn’t in Safari and all the iPhone browsers (since they’re all required to use the same display engine). I don’t have an Android phone, so it hasn’t been tested there.

Here is the code that made height responsive:

reTbody : List String -> Playing -> Table.TBody Msg
reTbody board playing =
    Table.tbody [ Html.Attributes.style "height" "calc(75vh - 16px)"] (boardTable board playing)        

The game URL is here, if that would help to visualize it (sorry, it isn’t very pretty): http://reversi.k2bea.org.

Any ideas on why it wouldn’t work in Safari and how it could be made to work?

A few suggestions:

  • Set html and body elements to height: 100% so your UI will stretch to the full browser viewport height.
  • Move your link to bootstrap CDN to head
  • From the code it seems you are using a mix of Bootstrap grid and HTML tables, which may work - but ask yourself where you are telling the browser the amount of vertical space to use for each portion of the UI. It seems to me this is left to the browser to apply some defaults and so they comply differently.
  • I would do things a bit differently. The body is a display: flex with flex-direction: column container, which contains a header a main and a footer elements. main contains the table you are using for the game board.

Hope this help to unblock you a little more.

Thanks for the reply. It did help to unblock me some. After moving the calc from the table body to the table it fixed the specific problem I mentioned. Now Safari behaves like Firefox and Chrome with respect to aspect ratio. But, now the viewport seems to have become strangely quantized where before in Chrome and FF it was pretty smooth. Alas.

Do you, or anybody else who might be reading this have any full samples of a browser application that uses the elm-bootstrap library? I haven’t been able to find any. I’m starting to wonder if maybe recoding with a different css library might be a better approach.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.