Closed
Bug 1250143
Opened 8 years ago
Closed 8 years ago
Firefox adds margins or paddings in elements into svg
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
FIXED
mozilla47
| Tracking | Status | |
|---|---|---|
| firefox47 | --- | fixed |
People
(Reporter: tres.14159, Unassigned)
References
()
Details
(Keywords: testcase)
Attachments
(5 files)
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.
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>
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 6•8 years ago
|
||
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)
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 8•8 years ago
|
||
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•8 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/faa614e2ad4e
Status: NEW → RESOLVED
Closed: 8 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.
Description
•