1754787 - SVG-element hitboxes are not correct when using CSS hover-selector

Status: RESOLVED DUPLICATE of bug 1167959

(Core :: SVG, defect)

Description

[oth.rand]

Attachment: Dependencies.html

Steps to reproduce:

I made an SVG image, and used a CSS hover-selector to select small SVG elements right beside eachother

The specific SVG in question: https://builds-staging.robur.coop/job/albatross/build/9628feaa-6f5c-4335-a69f-2470971b6da7/vizdependencies

.. The problem can be seen in the outermost black dots, where it's just some of them that can be hovered over. When hovering works, they get bigger

Actual results:

The hitboxes of the small SVG elements are not correct. One can correctly hover on some of them, but many don't work

Expected results:

All SVG-elements should have correct hitboxes. This is for example the case when using Chromium.

As Mozilla supports less surveillance on the internet - I think good support for interactive SVG's using CSS is important, as the alternative is using JS - which is a major part of the surveillance system. I.e. this would support people making sites using no JS

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Robert Longson [:longsonr]]

The alternative really is not to use tiny values. Your viewBox is 0 0 1 1. I imagine you'll have more success if it was say 0 0 100 100 or 0 0 1000 1000

Comment 3

[oth.rand]

That seems like a very brittle implementation to me. As a user I would like to have the freedom of working between 0 and 1. Also, I've never seen a problem like this before, so if it's because of the viewbox, then it's a problem most people won't be able to guess the root of

Comment 4

[oth.rand]

I confirm that changing the SVG calculations to fit, and changing viewBox to 0 0 100 100, corrects the hitboxes