1177050 - Specific SVG example not shown on Mac browsers

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: General, defect, P5)

Description

[qcgm197874]

:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

circle { mix-blend-mode: multiply; }

Comment 1

[Andre Klapper]

Hi qcgm197874, 
unfortunately this report is not very useful because it does not describe the problem well. If you have time and can still reproduce the problem, please read https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines and add a more useful description to this report by providing 1) steps to reproduce, 2) expected outcome, 3) actual outcome.

Comment 2

[qcgm197874]

Sorry,what I mean is:
1,the link https://mdn.mozillademos.org/en-US/docs/Web/CSS/mix-blend-mode$samples/Examples?revision=768109
directing an empty page.
2, I expect it has something so it can be a good example for https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
3,I wish the page outcomes some context, its css can be "circle { mix-blend-mode: multiply; }"

Comment 3

[Jean-Yves Perrier [:teoli]]

The $samples page works for me. It display three circles.

Which browser are you using?

Comment 4

[Andre Klapper]

Same here (example works in Firefox 38 on Fedora 22). Please provide browser and system info.

Comment 5

[qcgm197874]

(In reply to Andre Klapper from comment #4)
> Same here (example works in Firefox 38 on Fedora 22). Please provide browser
> and system info.
I'm using mac, and the browsers all hide the circles.
Chrome: Version 43.0.2357.130 (64-bit)
Canary: Version 45.0.2439.0 canary (64-bit)
Safari: Version 8.0.6 (10600.6.3)

Comment 6

[Andre Klapper]

qcgm197874: Do other SVGs on other sites get displayed correctly? If so, which ones?
Or if you just create your own local HTML page with something like this?:
  <svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50"/>
  </svg>

Comment 7

[qcgm197874]

Yes, I can see the circle in the following link: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle
so does the html "<svg xmlns="http://www.w3.org/2000/svg">
  <circle r="50"/>
  </svg>"
but if I set the circle's css: circle { mix-blend-mode: screen; } 
the circle disappear, so I doubt the 'screen' val should be 'multiply'

Comment 8

[Eric Shepherd [:sheppy]]

This example works fine for me in the latest Dev Edition on my Mac.

Comment 9

[Jean-Yves Perrier [:teoli]]

So it works in Firefox but not in Blink/Webkit: they don't support mix-blend-mode on SVG elements. It is a bug in Blink and Webkit.

Updated compat table on the page to indicate this.

Comment 10

[qcgm197874]

(In reply to Jean-Yves Perrier [:teoli] from comment #9)
> So it works in Firefox but not in Blink/Webkit: they don't support
> mix-blend-mode on SVG elements. It is a bug in Blink and Webkit.
> 
> Updated compat table on the page to indicate this.

Yes, it works in firefox developer edition on my mac