1950516 - Incorrect rendering of SVG elements with transform matrix

Status: RESOLVED DUPLICATE of bug 1927186

(Fenix :: General, defect)

Description

[NeatNit]

Attachment: railmap_desktop.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:135.0) Gecko/20100101 Firefox/135.0

Steps to reproduce:

Unfortunately, I haven't yet found a way to replicate this locally, and I think the website where it happens is geo-locked and likely can only be accessed from Israel. I'm sorry it's not easier to replicate.

Go to https://www.rail.co.il/?page=linesmap on desktop (issue observed on both Windows 10 and Linux Mint). Get past the DDOS protection and look at the rail network map - an embedded SVG.

This page renders correctly on Firefox 135.0.1 for Android! The issue only happens on desktop.

Actual results:

Incorrect rendering of the rail network map (see desktop screenshot)

Expected results:

Correct rendering of the rail network map (see android screenshot)

Comment 1

[NeatNit]

Attachment: railmap_android.jpg

Comment 2

[NeatNit]

The affected SVG elements all have transform="matrix(...)" attributes, it is likely the culprit. However, if I save the SVG "outer HTML" as a .svg file and open it in Firefox, it renders correctly, so something about it being embedded within that page is messing it up.

Comment 3

[NeatNit]

Oh! If I save the page as "complete webpage" and then delete its _files directory, then open the HTML page with Firefox, the bug occurs! Even though there are other rendering bugs (mostly the line width in the map), that is not important, only the transform issue matters. I will attach the HTML file.

Comment 4

[NeatNit]

Attachment: railmap.html

Comment 5

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

The Bugbug bot thinks this bug should belong to the 'Fenix::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 6

[NeatNit]

Attachment: attached_html.png

The attached HTML file rendered by Firefox on Linux Mint.

Comment 7

[Robert Longson [:longsonr]]

Can you create a minimal example please? It's hard to find the needle in the haystack at the moment.

Comment 8

[NeatNit]

I'm just as lost as you.. But I'll try.

Comment 9

[NeatNit]

Attachment: railmap_less_stuff.html

Okay, this is the best I've got: some unneeded HTML is removed, it's just the SVG within a bunch of divs. One of the divs has a style attribute, with the rule zoom: 120%;. If you delete this zoom rule, the issue goes away. So this likely has to do with how zoom interacts with a transform matrix.

This is as minimal as I can get. Hope it's enough to work with!

Comment 10

[Robert Longson [:longsonr]]

Attachment: further simplified testcase

Comment 11

[Robert Longson [:longsonr]]

Any idea where we're going wrong Emilio? It seems like transforms on the <g> elements are OK with zoom applied but the transform on the path is not.