SVG elements seem to be of wrong size in Firefox

[742617000027]

Hey! After having been pointed to this lovely repo, I went ahead and replaced all 'standard' OSD overlays in my application with d3 SVG elements. However, functionality in Firefox is now broken, since SVG elements seem to have a wrong size when inspected with developer tools.

SVG element, Firefox on the left, Chrome on the right:

Another SVG element, Firefox on the left, Chrome on the right:

I'm suspecting the size being off in Firefox to lead to unwanted behavior: Mouseover'ing the colored pictograms and name plates should normally open a tooltip for each of them. However, in Firefox, possibly because of overlapping elements, this functionality is broken.

Any ideas for a fix would be highly appreciated!

Edit: Also added the project code here.

[iangilman]

Hmm... what are those colored rectangles that are different sizes on Firefox vs Chrome? Some extra element of some sort? They aren't the tiles and they aren't the icons... I'm just trying to understand what you're doing.

At any rate, the sizes in web coordinates (what you see in the inspector) are generally irrelevant... the OpenSeadragon image and the SVG overlay both think in viewport coordinates (and only translate to web coordinates for display). Seems like maybe somewhere along the line you are conflating the two?

The SVG overlay plugin works in general on Firefox, for instance in:

https://iangilman.com/openseadragon/flickr/

...so it's something more specific than that. Please help me understand :)

[742617000027]

In the first example, the colored rectangle is Firefox's and Chrome's way of showing the outline of a .png file with opacity 0 that sits on top of the hexagon—when you mouseover certain icons on the map, opacity changes to 0.3, so it acts as a highlight. Every hex has an overlay like that. This is what the highlighting looks like when active:

In the second example, the colored squares from the OP that differ in size for FF and Chrome again are the outlines of an opacity 0 rectangle that, again, serves to highlight the icon the user is currently mouseover'ing. Looks like this when it's working:

In the case of the icon highlights, the opacity 0 rectangle is also the element to which an OSD MouseTracker is bound, to do the opacity change and for displaying a tooltip.

Interestingly enough, in the cases where mouseover'ing an icon does not highlight it and also doesn't open the tooltip, Firefox shows the element's size not as a square, but as a rectangle. This seems to be true for all non-working. Shows up in the Firefox inspector like this:

What puzzles me is the fact that visually, everything renders correctly with the coordinates and element sizes I'm providing. Only on mouseover'ing certain icons it becomes apparent that something is broken in Firefox.

[iangilman]

Thank you for explaining it. Are those rectangles part of the SVG overlay, or are they handled in some other way? Would it make sense to tie the hover to the icon itself, rather than a hidden rectangle?

[742617000027]

Even after some extensive fiddling I couldn't pinpoint the source of the problem. After inquiring on a WebDev Discord server, I was made aware that it might just be a Firefox bug:

Anyway, I reverted the overlays that have interactivity back to standard OSD overlays instead of SVG overlays, now everything works like a charm again. (Although I did have trouble with viewer.updateOverlay(), which didn't seem to work proberly—instead I'm now using a combination of viewer.getOverlayById() and Overlay.update().)

[iangilman]

Interesting. Sorry to hear Firefox SVG is broken like that. Glad you've found a solution, though.

What trouble were you having with updateOverlay? It might be good to file an issue over on:

https://github.com/openseadragon/openseadragon/issues/