0

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!!!

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
Jake Evans
  • 307
  • 6
  • 19

2 Answers2

3

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.

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
  • Awesome, that one simple line of CSS worked! I think I had tried that on the iframe itself, but apparently not on the svg element. I appreciate the help! – Jake Evans Jan 29 '15 at 19:18
0

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

Community
  • 1
  • 1
imnancysun
  • 612
  • 8
  • 14