9

I am running into a weird issue when using an inline SVG. I am creating a path in an <svg> element and using top or bottom CSS attributes with relative positioning to superimpose this SVG over a previous element to get a cool "cutout" effect on the section.

This totally works in Chrome, but in IE10 and FF25, I get this 'transparent' border to the right and top of the SVG. I put 'transparent' in quotes because as far as I know it is transparent since it is showing the bright green background that is underneath it. Here's a screenshot pointing to exactly where I'm seeing this (screenshot is from FF25):

SVG Border Issue in Firefox 25

I had originally gotten the separator suggestion from Codrops.

Test Page

In this test page, the section with a header of "SVG Trouble Section" is the section with the issue.

Is there anyway to aleviate this issue so my technique works fine cross-browser? Or is there a better way to achieve the effect I am going for? Thanks!

Update 1: Through a little more testing, I have found that sometimes while scrolling in Firefox, the top phantom 'border' disappears and doesn't return. Even after reloading the page. I'm not sure what is causing this to disappear and it isn't part of the problem, just an anomaly.

Update 2: I've done some additional testing by removing elements to see what may be triggering this and after removing comments, a few sections above the "SVG Trouble Section", and the footer, the border has now moved to the bottom separator. Here's the page without the footer: http://ignitepixels.com/sandbox/svg/sample.html

Update 3: I've created a fiddle in which I replicated the issue. This should make for easier troubleshooting: http://jsfiddle.net/fmpeyton/NuneR/

Since you can't save specific panel sizes in jsfiddle, I've attached a screenshot of the approximate size I was able to reproduce this issue with Firefox 25: Fiddle in Firefox 25 Possibly related to Update 1, the issue shows/disappears based on the window width as well.

Fillip Peyton
  • 3,637
  • 2
  • 32
  • 60
  • 3
    1+ Tested in FF.. So many cross browser inconsistencies. ಠ_ಠ – Josh Crozier Nov 08 '13 at 23:52
  • Thank you for testing! I'm glad its happening on other users' browsers and not just mine. – Fillip Peyton Nov 08 '13 at 23:56
  • 3
    The with of the "border" changes when I zoom (ctrl + scroll) so I guess this is a pixel rounding error. A workaround that seems to work is to set stroke-width to 5 and stroke to white – Pajn Nov 08 '13 at 23:57

3 Answers3

5

I'm not sure if it is a rounding error or an svg anti-aliasing painting issue, but I have only found the following to work consistently on both Firefox and IE10 in my testing (see example):

Change both SVG paths to this

Note the extra .1 added at two places

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

Change the top/bottom offsets of those elements

Change the offsets from -20px to -19.5px

Add this to .separator

    height: 20px;
    overflow: hidden;

What I don't know for sure is just how fragile this solution may be.

ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Definitely looks promising. I tested your fiddle in FF25 and IE10 and the issue seems resolved. I will try the solution in my project and get back to you. – Fillip Peyton Nov 13 '13 at 22:13
  • I applied this technique to my project and it seems to indeed work and solve my issue. This is likely the answer that will gain the bounty, but I wanted to leave it open in case there is an answer can explain exactly why FF25/IE10 are behaving this way, and a proper, clean, 'non-hacky' way of solving this. – Fillip Peyton Nov 14 '13 at 19:57
  • I'm going to go ahead and reward this bounty to @ScottS, since it will be rewarded to him anyway. I would love if anyone found the exact reason why this isn't behaving properly or a non-hacky way of solving this. Thanks again @ScottS! – Fillip Peyton Nov 19 '13 at 00:14
2

Another work-around is to add the following rules to section.green.

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • A good work-around, but only if my background image is indeed white. While this is the case in this scenario, I am looking for a solution that would allow for complex backgrounds (images, gradients, etc.) – Fillip Peyton Nov 12 '13 at 23:40
  • @FillipPeyton: Your svg on the green section is filling with a solid color of white, so it would not work against complex backgrounds anyway. Also, it would be nice for you to reproduce this in a fiddle or some form that we could easily manipulate for testing. – ScottS Nov 13 '13 at 19:22
  • That is true. Not sure why that didn't come to mind. Might've been thinking of another section of the page. I'll try reproducing in a fiddle. – Fillip Peyton Nov 13 '13 at 19:59
  • 1
    @ScottS, I have reproduced the issue in a fiddle. Please see **Update 3** in the original question. – Fillip Peyton Nov 13 '13 at 20:20
2

I had a similar problem with an svg graphic where i used tween-maxjs on it. Only in chrome I got a flickering border. I tried the recommended solutions from above but it didnt change anything.

So i found this article: Prevent flicker on webkit-transition of webkit-transform

and the key was: -webkit-backface-visibility: hidden;

I hope that will help someone struggling with the same problem. Cheers :)

Hendrik
  • 17
  • 3