Firefox adds margins or paddings in elements into svg

RESOLVED FIXED in Firefox 47

Status

()

Core
Layout
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: Miguel, Unassigned)

Tracking

({testcase})

44 Branch
mozilla47
testcase
Points:
---

Firefox Tracking Flags

(firefox47 fixed)

Details

(URL)

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(5 attachments)

(Reporter)

Description

2 years ago
Created attachment 8721982 [details]
firefox.jpg

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/48.0.2564.82 Chrome/48.0.2564.82 Safari/537.36

Steps to reproduce:

You can try with the next html code:

<html>
    <head>
        <title>example00</title>
    </head>
    <body>
        aaaaaaaaaaaa
        <div data-id="95" id="map">
                        <style type="text/css">
                svg {
                    margin: 0;
                }
                g {
                    margin: 0;
                }
            </style>
            <svg height="500px" width="100%" pointer-events="all" style="border: 2px solid red;" xmlns="http://www.w3.org/2000/svg">
                <g class="viewport" transform="translate(-1134.8008037565835,-465.99275413153373)scale(2.7132086548953445)">
                    <g transform="translate(722.22 125)"><circle id="node_1" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(572.22 158.33)"><circle id="node_2" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(805.56 208.33)"><circle id="node_10" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(722.22 241.67)"><circle id="node_11" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    <g transform="translate(838.89 225)"><circle id="node_12" class="node" style="fill: rgb(50, 50, 128);" r="6"/></g>
                    </g>
                </svg>
        </div>
    </body>
</html>

Or you can check this bug as question in Stack Overflow:

http://stackoverflow.com/questions/35555625/can-i-change-the-size-and-margin-of-g-or-firefox-has-a-bug


Actual results:

The firefox is shown with margins and a align a few to the right, as you see in the screenshot.


Expected results:

The group without margins or paddings, as can you see in the chromium screenshot.
(Reporter)

Comment 1

2 years ago
Created attachment 8721983 [details]
Screenshot in chromium
(Reporter)

Updated

2 years ago

Comment 2

2 years ago
Created attachment 8721990 [details]
testcase
(Reporter)

Comment 3

2 years ago
I found it. It is the f*cking border.

This is a example:

<html>
	<head>
		<title>example00</title>
	</head>
	<body>
		<b>The border is the trap!!!!</b>
		<br />
		<svg height="200" width="200" style="border: 30px solid red;">
			<g>
			  <circle cx="20" cy="20" r="20" fill="green"></circle>
			  <circle cx="70" cy="70" r="20" fill="purple"></circle>
			</g>
			<g>
			  <rect x="110" y="110" height="30" width="30" fill="blue"></rect>
			  <rect x="160" y="160" height="30" width="30" fill="red"></rect>
			</g>
		</svg>
		<br />
		<b>This is without border and some love.</b>
		<br />
		<svg width="200" height="200">
			<g>
			  <circle cx="20" cy="20" r="20" fill="green"></circle>
			  <circle cx="70" cy="70" r="20" fill="purple"></circle>
			</g>
			<g>
			  <rect x="110" y="110" height="30" width="30" fill="blue"></rect>
			  <rect x="160" y="160" height="30" width="30" fill="red"></rect>
			</g>
		</svg>
	</body>
</html>

Comment 4

2 years ago
For comment 2: I see the glitch in Firebug 2.0.14 on Fx45b6, and devtools in Fx45b6 (it is not obvious due to sideline, but it has the extra space on the left and top). Works fine in Chrome 48.
Status: UNCONFIRMED → NEW
Component: Untriaged → Layout
Ever confirmed: true
Keywords: testcase
Product: Firefox → Core

Comment 5

2 years ago
Created attachment 8721991 [details]
testcase - border: 30px

Copied from comment 3.
Comment on attachment 8721991 [details]
testcase - border: 30px

The two green circles have the same getClientRects()[0].x here, which seems wrong.  (I'm guessing that's what the DevTools highlighter is using.)
Flags: needinfo?(roc)
Created attachment 8723508 [details]
MozReview Request: Bug 1250143. Account for border/padding on outer <svg> elements in GeometryUtils. r=mats

Review commit: https://reviewboard.mozilla.org/r/36583/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/36583/
Attachment #8723508 - Flags: review?(mats)
Flags: needinfo?(roc)
Comment on attachment 8723508 [details]
MozReview Request: Bug 1250143. Account for border/padding on outer <svg> elements in GeometryUtils. r=mats

https://reviewboard.mozilla.org/r/36583/#review33137
Attachment #8723508 - Flags: review?(mats) → review+
https://hg.mozilla.org/integration/mozilla-inbound/rev/faa614e2ad4eff5e04c9886bd39f63ebe20fe00c
Bug 1250143. Account for border/padding on outer <svg> elements in GeometryUtils. r=mats

Comment 10

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/faa614e2ad4e
Status: NEW → RESOLVED
Last Resolved: 2 years ago
status-firefox47: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla47
You need to log in before you can comment on or make changes to this bug.