Specific SVG example not shown on Mac browsers

RESOLVED FIXED

Status

Developer Documentation
General
P5
normal
RESOLVED FIXED
2 years ago
2 years ago

People

(Reporter: qcgm197874, Unassigned)

Tracking

Details

(URL)

(Reporter)

Description

2 years ago
:: Developer Documentation Request

      Request Type: Correction
     Gecko Version: unspecified
 Technical Contact: 

:: Details

circle { mix-blend-mode: multiply; }

Comment 1

2 years ago
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.
Flags: needinfo?(qcgm197874)
(Reporter)

Comment 2

2 years ago
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; }"
Flags: needinfo?(qcgm197874)
The $samples page works for me. It display three circles.

Which browser are you using?

Comment 4

2 years ago
Same here (example works in Firefox 38 on Fedora 22). Please provide browser and system info.
Flags: needinfo?(qcgm197874)
(Reporter)

Comment 5

2 years ago
(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)
Flags: needinfo?(qcgm197874)

Updated

2 years ago
Summary: The example is not seen → Specific SVG example not shown on Mac browsers

Comment 6

2 years ago
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>
Flags: needinfo?(qcgm197874)
(Reporter)

Comment 7

2 years ago
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'
Flags: needinfo?(qcgm197874)
This example works fine for me in the latest Dev Edition on my Mac.
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
(Reporter)

Comment 10

2 years ago
(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
You need to log in before you can comment on or make changes to this bug.