All users were logged out of Bugzilla on October 13th, 2018

Drop support for -moz-prefixed gradients (-moz-linear-gradient, -moz-radial-gradient)

REOPENED
Assigned to

Status

()

REOPENED
3 years ago
a year ago

People

(Reporter: emk, Assigned: emk)

Tracking

(Depends on: 1 bug, Blocks: 2 bugs, {dev-doc-needed, site-compat})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

(Assignee)

Description

3 years ago
It's time to kill them.
(Assignee)

Updated

3 years ago
Blocks: 522607, 526708
Keywords: dev-doc-needed
(Assignee)

Comment 1

3 years ago
Created attachment 8625193 [details] [diff] [review]
patch

Try run:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=9d45ece898b2
Assignee: nobody → VYV03354
Status: NEW → ASSIGNED
Attachment #8625193 - Flags: review?(dbaron)
Sorry for taking so long to get to this.

I notice a large number of tests are deleted in this patch.  Do those tests have equivalent unprefixed versions, or would it be better to convert those tests to the new syntax?
Flags: needinfo?(VYV03354)
(Assignee)

Comment 3

3 years ago
Comment on attachment 8625193 [details] [diff] [review]
patch

Review of attachment 8625193 [details] [diff] [review]:
-----------------------------------------------------------------

::: layout/reftests/css-calc/background-image-gradient-1-ref.html
@@ -7,5 @@
>      border: thin solid;
>  }
>  
> -#one { background-image: -moz-radial-gradient(150px 20px, circle farthest-side, red, green); }
> -#two { background-image: -moz-linear-gradient(-22px -35px -45deg, blue, yellow); }

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-calc/background-image-gradient-1.html
@@ -7,5 @@
>      border: thin solid;
>  }
>  
> -#one { background-image: -moz-radial-gradient(calc(50px + 50%) calc(100% - 30px), circle farthest-side, red, green); }
> -#two { background-image: -moz-linear-gradient(calc(-12.5% + 3px) calc(-10px - 50%) -45deg, blue, yellow); }

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/aja-linear-1f.html
@@ -3,5 @@
>  <style>
>  div {
>    height: 200px;
>    width: 100px;
> -  background: -moz-linear-gradient(center top, yellow, blue);

Unprefixed linear gradients no longer support the "center" keyword, do removed the test.

::: layout/reftests/css-gradients/aja-linear-1g.html
@@ -1,1 @@
> -<!doctype html>

Renamed to aja-linear-1f.html.

::: layout/reftests/css-gradients/aja-linear-2b.html
@@ -3,5 @@
>  <style>
>  div {
>    height: 200px;
>    width: 100px;
> -  background: -moz-linear-gradient(0 0, yellow, blue);

Unprefixed linear gradients no longer support this syntax.

::: layout/reftests/css-gradients/aja-linear-2c.html
@@ -3,5 @@
> -<style>
> -div {
> -  height: 200px;
> -  width: 100px;
> -  background: -moz-linear-gradient(top 0px left 0px, yellow, blue);

Unprefixed linear gradients no longer support this syntax.

::: layout/reftests/css-gradients/aja-linear-2d.html
@@ -1,1 @@
> -<!doctype html>

Renamed to aja-linear-2b.html.

::: layout/reftests/css-gradients/aja-linear-6a.html
@@ -3,5 @@
> -<style>
> -div {
> -  height: 200px;
> -  width: 100px;
> -  background: -moz-linear-gradient(20px 30px, yellow, blue);

Unprefixed linear gradients no longer support this syntax.

::: layout/reftests/css-gradients/aja-linear-6b.html
@@ -3,5 @@
> -<style>
> -div {
> -  height: 200px;
> -  width: 100px;
> -  background: -moz-linear-gradient(left 20px top 30px, yellow, blue);

Unprefixed linear gradients no longer support this syntax.

::: layout/reftests/css-gradients/linear-1b.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(left, red 0%, #7777FF 50%, rgb(100, 200, 0) 100%) no-repeat; width: 300px; height: 300px;"><br></div>

Same as linear-1a.html after converting "left" to "to right".

::: layout/reftests/css-gradients/linear-diagonal-1a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(top left -45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-1b.html
@@ -1,1 @@
> -<div style="background: linear-gradient(135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Renamed to linear-diagonal-1a.html.

::: layout/reftests/css-gradients/linear-diagonal-1c.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(top left, white, black) no-repeat; width: 300px; height: 300px;"></div>

Same as linear-diagonal-1-ref.html after converting "top left".

::: layout/reftests/css-gradients/linear-diagonal-2a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(top right -135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-2b.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(-135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Renamed to linear-diagonal-2a.html.

::: layout/reftests/css-gradients/linear-diagonal-2c.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(top right, white, black) no-repeat; width: 300px; height: 300px;"></div>

Same as linear-diagonal-2-ref.html after converting "top right".

::: layout/reftests/css-gradients/linear-diagonal-3a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(bottom right 135deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-3b.html
@@ -1,1 @@
> -<div style="background: linear-gradient(-45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Renamed to linear-diagonal-3a.html.

::: layout/reftests/css-gradients/linear-diagonal-3c.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(bottom right, white, black) no-repeat; width: 300px; height: 300px;"></div>

Same as linear-diagonal-3-ref.html after converting "bottom right".

::: layout/reftests/css-gradients/linear-diagonal-4a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(bottom left 45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-4b.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(45deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Renamed to linear-diagonal-4a.html.

::: layout/reftests/css-gradients/linear-diagonal-4c.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(bottom left, white, black) no-repeat; width: 300px; height: 300px;"></div>

Same as linear-diagonal-4-ref.html after converting "bottom left".

::: layout/reftests/css-gradients/linear-diagonal-5a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(100px 100px 135deg, white, black); width: 400px; height: 400px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-6a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(300px 100px 45deg, white, black); width: 400px; height: 400px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-7a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(300px 300px -45deg, white, black); width: 400px; height: 400px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-8a.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(100px 300px -135deg, white, black); width: 400px; height: 400px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-diagonal-9-ref.html
@@ -7,5 @@
> -.i { background: -moz-linear-gradient(bottom right 2.03444394rad, blue, white, red); }
> -.k { background: -moz-linear-gradient(bottom 90deg, blue, white, red); }
> -.m { background: -moz-linear-gradient(bottom left 1.10714872rad, blue, white, red); }
> -.o { background: -moz-linear-gradient(left 0deg, blue, white, red); }
> -.q { background: -moz-linear-gradient(top left -1.10714872rad, blue, white, red); }

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-keywords-1b.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(left top, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>

Same as linear-keywords-1a.html after converting "left top".

::: layout/reftests/css-gradients/linear-mix.html
@@ -1,3 @@
> -<div style="background: -moz-linear-gradient(40% 20px 0deg, #0000ff, #000000) no-repeat; width: 300px; height: 300px; position: absolute; top: 30px; left: 30px;"><br></div>
> -
> -<div style="background: -moz-linear-gradient(10% bottom 90deg, #00ff00, #000000) no-repeat; width: 300px; height: 300px; position: absolute; top: 360px; left: 30px;"><br></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-percent.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(10% 20% 0deg, #0000ff, #000000) no-repeat; width: 300px; height: 300px;"><br></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-vertical-1b.html
@@ -1,1 @@
> -<div style="background: -moz-linear-gradient(top left -90deg, white, black) no-repeat; width: 300px; height: 300px;"></div>

Unprefixed linear gradients no longer support a degree with a position.

::: layout/reftests/css-gradients/linear-vertical-1e.html
@@ -1,1 @@
> -<div style="background: linear-gradient(to bottom, white, black) no-repeat; width: 300px; height: 300px;"></div>

Renamed to linear-vertical-1b.html.

::: layout/reftests/css-gradients/linear-zero-length-1a.html
@@ -1,2 @@
> -<div style="background: -moz-linear-gradient(150px 150px, white, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-linear-gradient(150px 150px, white, black); width: 300px; height: 300px;"></div>

Unprefixed gradients no longer support this syntax.

::: layout/reftests/css-gradients/linear-zero-length-1b.html
@@ -1,2 @@
> -<div style="background: -moz-linear-gradient(150px 150px, white, white 100px, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-linear-gradient(150px 150px, white, white 100px, black); width: 300px; height: 300px;"></div>

Unprefixed gradients no longer support this syntax.

::: layout/reftests/css-gradients/linear-zero-length-1c.html
@@ -1,2 @@
> -<div style="background: -moz-linear-gradient(center, white, black 50%); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-linear-gradient(center, white, black 50%); width: 300px; height: 300px;"></div>

Unprefixed gradients no longer support this syntax.

::: layout/reftests/css-gradients/radial-1c.html
@@ -1,1 @@
> -<div style="background: -moz-radial-gradient(100px 100px, closest-side, #ff0000 25px, #0000ff 50px) no-repeat; width: 300px; height: 300px;"><br></div>

Same as radial-1b.html after converting the syntax.

::: layout/reftests/css-gradients/radial-2e.html
@@ -1,1 @@
> -<div style="background: -moz-radial-gradient(100px 100px, closest-side, yellow -10px, #ff0000 0, #0000ff 50px); width: 300px; height: 300px;"><br></div>

Same as radial-2a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-2f.html
@@ -1,3 @@
> -<!-- This test checks that adjustment of stop positions to be non-negative
> -     happens after the calculation of implied stop positions -->
> -<div style="background: -moz-radial-gradient(100px 100px, closest-side, #ff0000 -50px, #ff0000, #0000ff 50px); width: 300px; height: 300px;"><br></div>

Same as radial-2b.html after converting the syntax.

::: layout/reftests/css-gradients/radial-onestopposition-1c.html
@@ -4,5 @@
> -
> -div {
> -  width: 200px;
> -  height: 200px;
> -  background-image: -moz-radial-gradient(contain, blue 25%, orange 25%);

Same as radial-onestopposition-1a.html after converting the keyword.

::: layout/reftests/css-gradients/radial-shape-closest-corner-1c.html
@@ -5,5 @@
> -<div style="background: -moz-radial-gradient(80px 140px, circle closest-corner, white, black); top:220px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(60px 80px, ellipse closest-corner, white, black 60px); top:430px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(140px 80px, ellipse closest-corner, white, black 60px); top:430px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(80px 60px, closest-corner, white, black 80px); top:640px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(80px 140px, closest-corner, white, black 80px); top:640px; left:220px;"></div>

Same as radial-shape-closest-corner-1a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-shape-closest-side-1c.html
@@ -5,5 @@
> -<div style="background: -moz-radial-gradient(80px 150px, circle closest-side, white, black); top:220px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(20px 40px, ellipse closest-side, white, black); top:430px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(180px 40px, ellipse closest-side, white, black); top:430px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(40px 20px, closest-side, white, black); top:640px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(40px 180px, closest-side, white, black); top:640px; left:220px;"></div>

Same as radial-shape-closest-side-1a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-shape-farthest-corner-1c.html
@@ -5,5 @@
> -<div style="background: -moz-radial-gradient(80px 160px, circle farthest-corner, white, black); top:220px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(60px 80px, ellipse farthest-corner, white, black 140px); top:430px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(140px 80px, ellipse farthest-corner, white, black 140px); top:430px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(80px 60px, farthest-corner, white, black 120px); top:640px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(80px 140px, farthest-corner, white, black 120px); top:640px; left:220px;"></div>

Same as radial-shape-farthest-corner-1a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-shape-farthest-side-1c.html
@@ -5,5 @@
> -<div style="background: -moz-radial-gradient(80px 150px, circle farthest-side, white, black); top:220px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(80px 40px, farthest-side, white, black); height:100px; top:430px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(120px 60px, farthest-side, white, black); height:100px; top:430px; left:220px;"></div>
> -<div style="background: -moz-radial-gradient(40px 80px, ellipse farthest-side, white, black); width:100px; top:640px; left:10px;"></div>
> -<div style="background: -moz-radial-gradient(60px 120px, ellipse farthest-side, white, black); width:100px; top:640px; left:220px;"></div>

Same as radial-shape-farthest-side-1a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-zero-length-1g.html
@@ -1,2 @@
> -<div style="background: -moz-radial-gradient(left, circle closest-side, white, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-radial-gradient(left, circle closest-side, white, black); width: 300px; height: 300px;"></div>

Same as radial-zero-length-1a.html after converting the syntax.

::: layout/reftests/css-gradients/radial-zero-length-1h.html
@@ -1,2 @@
> -<div style="background: -moz-radial-gradient(left, circle closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-radial-gradient(left, circle closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>

Same as radial-zero-length-1b.html after converting the syntax.

::: layout/reftests/css-gradients/radial-zero-length-1i.html
@@ -1,2 @@
> -<div style="background: -moz-radial-gradient(left, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-radial-gradient(left, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>

Same as radial-zero-length-1d.html after converting the syntax.

::: layout/reftests/css-gradients/radial-zero-length-1j.html
@@ -1,2 @@
> -<div style="background: -moz-radial-gradient(top, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>
> -<div style="background: -moz-repeating-radial-gradient(top, ellipse closest-side, red, white 100px, black); width: 300px; height: 300px;"></div>

Same as radial-zero-length-1f.html after converting the syntax.

::: layout/reftests/css-gradients/repeating-radial-1e.html
@@ -1,1 @@
> -<div style="background: -moz-repeating-radial-gradient(closest-side, black 100px, black 150px, white 150px, white 200px); width: 400px; height: 400px;"></div>

Same as repeating-radial-1a.html after unprefixed.

::: layout/reftests/css-gradients/repeating-radial-1f.html
@@ -1,4 @@
> -<!-- Test adjustment of negative stop positions in a repeating radial gradient.
> -     We should still get a repeating pattern, i.e., the stops cannot
> -     naively be mapped to 0. -->
> -<div style="background: -moz-repeating-radial-gradient(closest-side, black -100px, black -50px, white -50px, white 0); width: 400px; height: 400px;"></div>

Same as repeating-radial-1a.html after unprefixed.

::: layout/reftests/css-gradients/repeating-radial-onestopposition-1c.html
@@ -4,5 @@
> -
> -div {
> -  width: 200px;
> -  height: 200px;
> -  background-image: -moz-repeating-radial-gradient(contain, blue 25%, orange 25%);

Same as repeating-radial-1a.html after converting the obsolete keyword.

::: layout/reftests/css-gradients/twostops-1f.html
@@ -1,1 @@
> -<div style="background: linear-gradient(to bottom, #0000ff 50%, #ff0000 50%) no-repeat; width: 300px; height: 300px;"><br></div>

Same as twostops-1a.html after converting the keyword.

::: layout/reftests/css-gradients/twostops-1g.html
@@ -1,1 @@
> -<div style="background: linear-gradient(to top, #ff0000 50%, #0000ff 50%) no-repeat; width: 300px; height: 300px;"><br></div>

Same as twostops-1b.html after converting the keyword.
(Assignee)

Comment 4

3 years ago
I added comments explaining why I removed some tests.
Flags: needinfo?(VYV03354)
Comment on attachment 8625193 [details] [diff] [review]
patch

ok, thanks.  Sounds like you went through all of that carefully.

r=dbaron
Attachment #8625193 - Flags: review?(dbaron) → review+
(Assignee)

Comment 6

3 years ago
Created attachment 8631551 [details] [diff] [review]
patch for checkin

Rebased to tip.
https://treeherder.mozilla.org/#/jobs?repo=try&revision=ee6107d932f1
Attachment #8625193 - Attachment is obsolete: true
Attachment #8631551 - Flags: review+
https://hg.mozilla.org/mozilla-central/rev/acb7eb7f5ad4
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox42: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla42

Updated

3 years ago
Depends on: 1182775

Updated

3 years ago
Keywords: site-compat

Updated

3 years ago
Depends on: 1182861
Depends on: 1183504

Updated

3 years ago
Depends on: 1183602
Summary: Drop support for -moz-prefixed gradients → Drop support for -moz-prefixed gradients (-moz-linear-gradient, -moz-radial-gradient)

Comment 9

3 years ago
Another dependency on a webcompat bug https://github.com/webcompat/web-bugs/issues/1061#issuecomment-120776627
Dependency on webcompat https://webcompat.com/issues/1393
Depends on: 1183963
As discussed on the compatibility list[1], it unfortunately looks like we should back this out for now, since it doesn't seem to be web-compatible.  Multiple high-profile sites seem to depend on -moz prefixed gradients, and that doesn't bode well for the broader web. (and there's one case already reported of some maybe-rarely-updated router firmware depending on this - bug 1183963)

If we want to push forward with un-supporting this, we'll need to do so more strategically.

emk, would you mind backing this out?

[1] https://groups.google.com/forum/#!topic/mozilla.compatibility/ekZBqfOnzTc
Flags: needinfo?(VYV03354)
(We may be able to re-land this, experimentally at least, once we support -webkit prefixed gradients on the whole web via bug 1170774 [or one of its dependencies].  With -webkit gradient support, we'd be able to drop -moz-linear-gradient & use -webkit gradients as fallback, as long as they're present, and they probably will be on most sites. That won't help with current Facebook, per bug 1183504, but we're working with them on that & hopefully not too many other sites do the same browser-specific-CSS thing that Facebook does.)
(Assignee)

Comment 13

3 years ago
I'm fine with backout for now.
I'll file follow-up bugs for a more gradual deprecation plan.
(Assignee)

Comment 14

3 years ago
(In reply to Daniel Holbert [:dholbert] from comment #12)
> That won't help with
> current Facebook, per bug 1183504,

And Gmail (per bug 1182775).
(Assignee)

Updated

3 years ago
Flags: needinfo?(VYV03354)

Updated

3 years ago
Depends on: 960433

Updated

3 years ago
Depends on: 1183994

Updated

3 years ago
Depends on: 1184133
No longer depends on: 1184133
Depends on: 1183084
Reopening since this has been backed out, per comment 13 / comment 15.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Merge of backout:
https://hg.mozilla.org/mozilla-central/rev/fd77aec609b0
status-firefox42: fixed → ---
Target Milestone: mozilla42 → ---
Blocks: 775235
Could we put -moz-*-gradient support behind an about:config pref, as suggested by dbaron in [1]?  e.g. "layout.css.moz-gradient.enabled"?

I think nsCSSParser.cpp just needs a new static bool (similar to e.g. "sUnprefixingServiceEnabled"), and we need to wrap the following code in a check for that bool:
> 7419     if (StringBeginsWith(tmp, NS_LITERAL_STRING("-moz-"))) {
> 7420       tmp.Rebind(tmp, 5);
> 7421       isLegacy = true;
> 7422     }

I suspect that's all that's required to get this support to be user-configurable. (along with a line in modules/libpref/init/all.js to set this pref to "true" by default)
StringBeginsWith(tmp, NS_LITERAL_STRING("-moz-"

[1] https://groups.google.com/d/msg/mozilla.compatibility/ekZBqfOnzTc/421z8emixM8J
Flags: needinfo?(VYV03354)
(Maybe comment 18 belongs in its own helper-bug, since it's a pretty small change & doesn't require the rest of the changes in the original commit here. Then we can close out that bug in the near term, and leave this bug to cover the rest of the changes [e.g. fixing up all the tests] if we can re-land this someday.)
+1 for a pref. I filed Bug 1186636 for that.
See Also: → bug 1186636
(Assignee)

Comment 21

3 years ago
I'll comment in bug 1186636.
Flags: needinfo?(VYV03354)
I just wanted to add that the Modernizr library's gradient detection script[1] fails when the prefixed version of the gradients are removed because the test does not use the "to" keyword when testing for the non-prefixed version of gradients.  So this may be a pain for any sites that rely on this specific detect.

[1] https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/gradients.js#L29
Re comment 22 - Thanks; I reported that as https://github.com/Modernizr/Modernizr/issues/1621 since it didn't seem to be reported to Modernizr.

Comment 24

3 years ago
Wait, aren't moz-linear-gradients still being used Mozilla.com? Here is one such instance in Tabzilla, there are others in other files:
https://github.com/mozilla/bedrock/blob/82307473ff5be27554fd4c818362ecfafd4aa9f4/media/css/tabzilla/tabzilla.less
If they are, we should file bugs / github issues / whatever to remove them, since we'd like for that syntax to no longer be meaningful!

In the specific CSS you linked to, it looks like the site's not *relying* on the -moz-linear-gradient; it's got standard syntax lower down.  So -moz-linear-gradient is at worst just cruft there (unlike the tech evang issues that were filed as dependencies of this bug, where sites were/are actually relying on -moz-linear-gradient).

Still: yes, we should remove it from the CSS there.
With Bug 1210575 fixed, I wonder if we can safely drop -moz-prefixed gradients (perhaps when some of the other related webkit gradient bugs land).
(Yeah, I mentioned that in comment 12.  Worth trying, probably, though we should wait on bug 1213126.)
(Oops, missed comment 12. Or at least forgot about reading it 3 months ago.)
See Also: → bug 1307049
Depends on: 1337655
You need to log in before you can comment on or make changes to this bug.