Closed Bug 1055566 Opened 10 years ago Closed 10 years ago

SVG not displaying correctly on Windows in only Firefox browser

Categories

(Core :: SVG, defect)

Product:
Core
Component:
SVG
Version:
31 Branch
Platform:
x86_64
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 1003213

People

(Reporter: sebastian, Unassigned)

References

(
URL
)

Details

(Keywords: testcase)

Attachments

(2 files)

logo.svg
10.24 KB, image/svg+xml
Details
MisdrawnSVG.png
6.42 KB, image/png
Details
Attached image logo.svg — 
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36

Steps to reproduce:

I included the image in my website using this code: 
<img class="logo" src="http://trojandev.proggle.net/common/img/logo.svg" />
The style in a CSS file:
	padding-left: 0.5%;
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	overflow: visible;


Actual results:

The bottom and right edges of the circular logo have straight lines drawn parallel to the apex of the circle, similar to if you overlaid the following characters:  )|


Expected results:

The logo should be a perfect circle, it is when it isn't resized using CSS however the size is responsive and therefore an exact size.svg cannot be used
Attached image MisdrawnSVG.png — 
This is what it looks like in Firefox
Pedanting note: the outer circle is a path instead of an actual SVG <circle>, and so it isn't technically a perfect circle (I can see segments if I display the file on its own).

Either way, the rendering we get seems buggy. Can you create a quick testbase in jsbin or as a simple html file that loads the svg from the attachment here? I tried ( http://jsbin.com/muraga/1/edit ) but I don't get the rendering your screenshot showed, presumably because in context, the 0.8em works out as something else than it does in an empty document? You should be able to use the devtools inspector to figure out the size you're getting that produces the artifacts shown in the screenshot.
Component: Untriaged → SVG
Flags: needinfo?(sebastiantroy)
Product: Firefox → Core
I've managed to replicate the rendering in your JS Bin, in case my edits don't save, here is the css:

.title {
  color: #132944;
  text-align: center;
  font-size: 96px;
  font-family: "Quattrocento",serif;
  cursor: default;
}

img {
    display: inline-block;
    height: 76.8px;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding-left: 8.4px;
    width: 76.8px;
}

The html body is now <body><div class="title">Troy<img src="https://bugzilla.mozilla.org/attachment.cgi?id=8475186">Dev</div></body>
Flags: needinfo?(sebastiantroy)
While I see flat sides, I still don't see the effect shown in attachment 8475188 [details] - but I'm on mac, and don't seem to have the font you specified; perhaps that is related.
URL: http://jsbin.com/muraga/2/edit
Keywords: testcase
Perhaps it is only Firefox for Windows? The effect is also present in your original JS Bin however the SVG is so small that its almost a square anyway. I'm replacing the outer circular path with an actual circle, perhaps that will mitigate the problem though it won't solve the Firefox bug.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: