A simplified form of my original question. Given the code below (for Chrome/Safari), how can I make the "text" in the inner div appear at top left, without knowing the values in the transformation matrix of the outer div?
<body>
<div style="-webkit-transform: matrix(1, 0, 0, 1, 100, 50);">
<div style='background-color: #f00; -webkit-transform: none; left: 0px; top: 0px; position: fixed'>text</div>
</div>
</body>
No matter what I try in terms of CSS, I can't make the inner div ignore the outer transform(). From the spec it seems like -webkit-transform: none should clear the stack of transforms, and/or position: fixed; but nothing works for me. I've tried related code in Firefox ('transform') with same issue.
Original formulation: I'm trying to use D3JS to draw into an SVG container that is set up as a google.maps.OverlayView and positioned directly on top of my google map container, both 600x400 fixed position at top left. You can see the code in gist here.
This works fine until you drag the map, at which point it is repositioning my SVG container, apparently due to the -webkit-transform: matrix(...) in one of the parent divs: if I toggle that line off in Chrome DevTools, my overlayview comes back to the right place. I need the overlayview to stay aligned with the map viewport, since I am refreshing the content when the map moves.