Styjun

What is the "Brake to Exit" feature on the Boeing 777X?

Why does 8 bit truecolor use only 2 bits for blue?

How do draw effects during the discard phase work?

What exactly is Apple Cider

How to restrain your dragon?

Do Sobolev spaces contain nowhere differentiable functions?

What makes an ending "happy"?

I multiply the source, you (probably) multiply the output!

Why can't some airports handle heavy aircraft while others do it easily (same runway length)?

How to apply a register to a command

Is future tense in English really a myth?

How do I play this harmonic? (Guitar)

Why are some hotels asking you to book through Booking.com instead of matching the price at the front desk?

Poor management handling of recent sickness and how to approach my return?

How do you say "to hell with everything" in French?

Is there some sort of French saying for "a person's signature move"?

How many attacks exactly do I get combining Dual Wielder feat with Two-Weapon Fighting style?

Should I tip on the Amtrak train?

Examples where "thin + thin = nice and thick"

Infinitely many primes

How is the phase of 120V AC established in a North American home?

What is the purpose of the rotating plate in front of the lock?

Why are there no wireless switches?

Why did Tony's Arc Reactor do this?

Chrome SVG rendering artifacts

Disable same origin policy in ChromeHow to remove focus border (outline) around text/input boxes? (Chrome)See :hover state in Chrome Developer ToolsHow do I manually fire HTTP POST requests with Firefox or Chrome?Disabling Chrome cache for website developmentGetting Chrome to accept self-signed localhost certificateHow do I get ASP.NET Web API to return JSON instead of XML using Chrome?SVG gradient for perfectly horizontal pathIssue with linear gradient on svg textCan you disable gpu rasterization in Google Chrome on a specific SVG element?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I have a simple example of a Chrome SVG rendering issue. There are two overlapping triangles—but instead of being filled with a solid color, a gradient is added in Chrome:

https://jsfiddle.net/prozoroff/f97tjwcb/

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150 150 L200 200 L180 200"
 stroke="none" fill="rgba(50,50,50)"></path>
</svg>

Has anyone else come across this issue? It looks like a bug but maybe there are some ways to fix it in code?

google-chrome svg path

share|improve this question

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a weird one, for sure.
  
  – sean
  Mar 27 at 21:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The only things wrong with your code is that rgba() colors need an explicit fourth value for alpha, even if it's 1, and <path/> elements are meant to be self-closing. But fixing those things doesn't make a difference. Definitely a bug.
  
  – sean
  Mar 27 at 21:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's probably a bug. You should report it to chrome
  
  – Duannx
  Mar 28 at 3:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you have reported it to Chrome, then please post a link to the bug report here (for the benefit of future readers).
  
  – Paul LeBeau
  Mar 28 at 5:57
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  nvm. I've reported it myself to Skia. It seems to be a bug with the GPU renderer. bugs.chromium.org/p/skia/issues/detail?id=8930
  
  – Paul LeBeau
  Mar 28 at 6:11
  

  
  
  
  

add a comment | 

2

I have a simple example of a Chrome SVG rendering issue. There are two overlapping triangles—but instead of being filled with a solid color, a gradient is added in Chrome:

https://jsfiddle.net/prozoroff/f97tjwcb/

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150 150 L200 200 L180 200"
 stroke="none" fill="rgba(50,50,50)"></path>
</svg>

Has anyone else come across this issue? It looks like a bug but maybe there are some ways to fix it in code?

google-chrome svg path

share|improve this question

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  That's a weird one, for sure.
  
  – sean
  Mar 27 at 21:27
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The only things wrong with your code is that rgba() colors need an explicit fourth value for alpha, even if it's 1, and <path/> elements are meant to be self-closing. But fixing those things doesn't make a difference. Definitely a bug.
  
  – sean
  Mar 27 at 21:35
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  It's probably a bug. You should report it to chrome
  
  – Duannx
  Mar 28 at 3:41
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If you have reported it to Chrome, then please post a link to the bug report here (for the benefit of future readers).
  
  – Paul LeBeau
  Mar 28 at 5:57
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  nvm. I've reported it myself to Skia. It seems to be a bug with the GPU renderer. bugs.chromium.org/p/skia/issues/detail?id=8930
  
  – Paul LeBeau
  Mar 28 at 6:11
  

  
  
  
  

add a comment | 

I have a simple example of a Chrome SVG rendering issue. There are two overlapping triangles—but instead of being filled with a solid color, a gradient is added in Chrome:

https://jsfiddle.net/prozoroff/f97tjwcb/

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150 150 L200 200 L180 200"
 stroke="none" fill="rgba(50,50,50)"></path>
</svg>

Has anyone else come across this issue? It looks like a bug but maybe there are some ways to fix it in code?

google-chrome svg path

share|improve this question

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150 150 L200 200 L180 200"
 stroke="none" fill="rgba(50,50,50)"></path>
</svg>

google-chrome svg path

google-chrome svg path

share|improve this question

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

share|improve this question

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

edited Mar 28 at 11:42

sean

1,71122 gold badges1010 silver badges2727 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

asked Mar 27 at 12:17

prozorovprozorov

3133 bronze badges

1 Answer
1

active

oldest

votes

0

One way to work around this issue is by moving the second move (M) slightly off the diagonal line.

 M150.2 150.2

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

share|improve this answer

edited Mar 28 at 6:12

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55377012%2fchrome-svg-rendering-artifacts%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

One way to work around this issue is by moving the second move (M) slightly off the diagonal line.

 M150.2 150.2

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

share|improve this answer

edited Mar 28 at 6:12

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

add a comment | 

0

One way to work around this issue is by moving the second move (M) slightly off the diagonal line.

 M150.2 150.2

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

share|improve this answer

edited Mar 28 at 6:12

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

add a comment | 

One way to work around this issue is by moving the second move (M) slightly off the diagonal line.

 M150.2 150.2

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

share|improve this answer

edited Mar 28 at 6:12

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

 M150.2 150.2

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

<svg width="1000px" height="1000px">
 <path id='path' d="M100 100 L100 200 L200 100 M150.2 150.2 L200 200 L180 200"
 stroke="none" fill="rgb(50,50,50)"></path>
</svg>

share|improve this answer

edited Mar 28 at 6:12

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges

answered Mar 28 at 5:56

Paul LeBeauPaul LeBeau

62.9k66 gold badges7878 silver badges105105 bronze badges