CODEWITHSUNDEEP
htmlcssfirefox
Akhil Mohan
Akhil Mohan

Reputation: 83

Mask property not working in Firefox

The CSS mask is not working in Firefox, but the same CSS is working in Chrome. What do I need to change?

This is what I am currently using:

.web-cam {
  width: 250px;
  height: 250px;
  border-radius: 125px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
video {
  width: 500px;
  height: 500px;
  position: absolute;
  top: -125px;
  left: -125px;
}
<div class="web-cam">
  <video autoplay="autoplay">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  </video>
</div>

Chrome Browser View

Chrome View

Firefox Browser View

Firefox View

Upvotes: 0

Views: 922

Answers (1)

misterManSam
misterManSam

Reputation: 24712

-webkit-mask-image is the prefixed property of the standard mask property which is partially supported by Firefox. Browser support is spotty and does not exist in any IE version. Firefox only supports the use of an SVG and not the gradient you are currently using:

Partial support in WebKit/Blink browsers refers to supporting the mask-image and mask-box-image properties, but lacks support for othe parts of the spec. Partial support in Firefox refers to only support for inline SVG mask elements i.e. mask: url(#foo).

All is not lost!

The good thing is, there are other options. Here is a basic idea using overflow: hidden on the div. The video underneath is "clipped" by the border radius. It will work in any browser that supports the border-radius property and HTML5 video. So, just about everywhere.

Works Everywhere

Example

.web-cam {
  width: 200px;
  height: 200px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}
video {
  height: 100%;
  width: 200%;
  margin-left: -50px;
}
<div class="web-cam">
  <video autoplay="autoplay">
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  </video>
</div>

Upvotes: 1

Related Questions