Search code examples
domelm

Window.dimensions is triggered twice when using Elm.fullscreen in Elm

Consider the following program:

module App where

import Color exposing (..)
import Graphics.Collage exposing (..)
import Graphics.Element exposing (..)
import Window
import Debug


view : (Int, Int) -> Element
view (windowWidth, windowHeight) =
  let
    _ = Debug.log "dimensions" (windowWidth, windowHeight)
  in
    square 100
      |> filled Color.grey
      |> List.repeat 1
      |> collage windowWidth windowHeight


main : Signal Element
main =
  Signal.map view Window.dimensions

When running this program on Try Elm, the square is perfectly centered, and I see a single printout like dimensions: (689,431) in browser's console. This is the expected behaviour.

However, when embedding this program in HTML:

<head>
  ...
  <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
<script>
  Elm.fullscreen(Elm.App, {
    initialSeed: randomlyGeneratedNumber
  });
</script>

I see two printouts in browser's console:

dimensions: (384,204)
dimensions: (369,204)

and I see a vertical scrollbar appears:

enter image description here

Any ideas how to fix this?

Solution

  • The fact you see two printouts means that view is being called twice. In general, this means that any signal that view is mapped over could have updated, but here that's only Window.dimensions. (Right?)

    It's entirely possible that the runtime is just updating what it thinks the screen dimensions are, just like it will if you resize the window. Then the problem is not that it runs twice but that you're given the wrong size. If you have a vertical scrollbar, the height is too big, and that's the one that stayed the same in your printout.

    From a debugging standpoint, have you tried making your HTML and JS as similar as possible to elm-lang/try? For example, removing the initialSeed port value? (If you don't declare the incoming port in Elm, that should be an immediate runtime error, please report if not.) If you resize your browser to a known window size, how do the values differ from that? It's also possible you need to disable margin or padding on the body element.