CODEWITHSUNDEEP
htmlcssfirefoxsvgd3.js
Jake Evans
Jake Evans

Reputation: 317

Firefox CSS and/or D3 difference

So I've got a page on a site that displays exactly like it should in both IE and Chrome, but not Firefox. The link is http://www.jakerevans.com/?page_id=61. In both IE and Chrome, the spinning animation (written with D3.js) displays fully through the padding-left and padding-top, but not in Firefox. Anyone have any idea how I can make this padding in Firefox transparent? Any other possible solutions? I'd really like to resolve this through CSS if possible, and not go back to the drawing board with the D3 code. Obviously I will if I have to though.

Thanks a lot for the help!!!

Upvotes: 0

Views: 815

Answers (2)

AmeliaBR
AmeliaBR

Reputation: 27534

You need to explicitly set overflow: visible on your <svg> element.

The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.

Upvotes: 3

imnancysun
imnancysun

Reputation: 632

it doesn't seem to be the issue of the padding, it's like to be the firefox transform origin thing, see this Setting transform-origin on SVG group not working in FireFox

Upvotes: 0

Related Questions