getViewportOf populated vs empty div

[Libbum]

I’ve hit a bit of a bump concerning the getViewport and getViewportOf DOM handlers.

Using a Browser.application framework, with a subscription to Browser.Events.onResize, I need to find the width of a div in my model.

Here’s a MWE view:

view : Model -> Browser.Document Msg
view model =
    { title = "MWE"
    , body =
        [ div [ Html.Attributes.id "gallery" ] <| displayImages model.images model.viewportWidth
        ]
    }

The images and model.viewportWidth are loaded on the init call, displayImages returns List (Html Msg).
viewportWidth comes from a task which requests getViewportOf "gallery", and uses Viewport.viewport.width. The onResize subscription fires off the same command when the window is resized.

The problem I have is that the initial div width seems to be wrong… If I load my application, alignment of my images is not as expected, but as soon as I resize the window everything aligns correctly. Take a look at the debug log below. The initial width captured on load is 823:

This is larger than I expect, since I then resize the window to be wider than it was initially, and then return a smaller than initial width of 809. This width is correct as far as I’m concerned.

So. This could have something to do with chrome’s default margin settings perhaps? Is there a way I can make the div ignore these margins initially? I tried to fix this by forcing a style on the div:

div [ Html.Attributes.id "gallery", Html.Attributes.style "width" "800px" ] ...

gives me a good initial value, but obviously defeats the purpose of this exercise.

div [ Html.Attributes.id "gallery", Html.Attributes.style "width" "100%" ] ...

yields the same issues as above, so is ultimately no help.

[Libbum]

Well, I somewhat solved it, although not as cleanly as I would have liked.

The answer was connected to a similar issue @rupert was dealing with here: How to get the window size with Browser.Dom?

Effectively, the incorrect initial width is due to me populating data larger than the screen height into the div, so the scrollbar needs to be added (and this isn’t taken into account initially).

So what I’ve done is dropped down to a Browser.element for now, and styled the body with

body {                                                                                                                                                                 
     overflow-y: scroll;                                                                                                                                                
     overflow-x: hidden;                                                                                                                                                
     margin: 0px                                                                                                                                                        
}   

Is this a decent enough solution or is there a better way to handle this inside a Browser.application?