Getting mouse move events in embedded Elm program in Chromium - elm

Question

Note: I am only seeing this behaviour in Chromium. In Firefox I get the mouse movement signals I expect when I mouse over the Elm app.
When I "embed" my Elm program instead of "fullscreen" it, it doesn't give me Mouse.position signals unless I click and drag the mouse in the div in which it is embedded. Even when I move my mouse over the div containing the Elm app, I don't get signals unless I click and drag.
My Elm code is copied directly from http://elm-lang.org/examples/mouse-position :
import Graphics.Element exposing (..)
import Mouse
main : Signal Element
main =
Signal.map show Mouse.position
My HTML is:
<div id="mousepos" style="display: inline-block;"></div>
<script src="mousepos.js"></script>
<script type="text/javascript">
var mousepos = document.getElementById( "mousepos" );
Elm.embed( Elm.Main, mousepos );
</script>
If I click and drag on the div, I see the numbers change, but if I just move my mouse around, they don't change (even if I've clicked once to give the canvas focus).
Am I doing something wrong?
Edit: emphasised I don't see mouse movement even when I move the mouse over the div containing the Elm app.
Edit 2: added note that I only see this in Chromium.

Answer 1

Mouse.position only listens to mouse movements on the top level DOM element making up your Elm app.
You can see this by looking at the source code where Mouse.position is tied to the listening event. It adds the listener to the Elm app DOM node only, not the whole page. Since you're doing Elm.embed(), your node is just the mousepos div, not the whole page.
If you want to respond to mouse positions on the entire page, you'll need to make a port which sends in global mouse position signals from Javascript.