Closed
Bug 988460
Opened 11 years ago
Closed 11 years ago
Firefox doesn't recognize radial-gradients when used as a value for border-image.
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 709587
People
(Reporter: andymercer, Unassigned)
Details
(Keywords: css3)
Attachments
(1 file)
(deleted),
image/png
|
Details |
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0 (Beta/Release)
Build ID: 20140314220517
Steps to reproduce:
Opened Firefox, opened a JSFiddle environment, created a div with a border-image that uses radial-gradient for it's value.
border-image:-webkit-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
Actual results:
The box appeared with no border.
Expected results:
There should have been a border. Note, this works in Chome. See http://jsfiddle.net/KZSLH/1/ for working demo.
Reporter | ||
Comment 1•11 years ago
|
||
Also tried:
border-image:-moz-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
border-image:radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
-moz-border-image:radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
-moz-border-image:-moz-radial-gradient(-15% -15%, farthest-side, red, blue) 20/8;
Comment 2•11 years ago
|
||
The -webkit version wont' work in non-webkit browsers, obviously.
For the rest, Chrome has a known bug: they implement an old version of the border-image spec, where setting border-image would override a border-style of "none". See <https://bugs.webkit.org/show_bug.cgi?id=99922>. I filed https://code.google.com/p/chromium/issues/detail?id=356802 since Google is now ignoring WebKit bug reports...
In any case, this works just fine if you actually follow the spec. See http://jsfiddle.net/KZSLH/6/
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago
Resolution: --- → WORKSFORME
Reporter | ||
Comment 3•11 years ago
|
||
Even following the spec and adding border-style:solid;, Firefox renders differently than Chrome, and doesn't show the gradient. http://jsfiddle.net/KZSLH/7/
Adding screenshot attachment to show the difference.
Status: RESOLVED → UNCONFIRMED
Resolution: WORKSFORME → ---
Reporter | ||
Comment 4•11 years ago
|
||
Comment 5•11 years ago
|
||
Oh, in Firefox 28. This was implemented in 29. Try a current beta build.
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → DUPLICATE
Comment 6•11 years ago
|
||
This bug is still unresolved and persists in Firefox v29.01. I have yet to find an example of gradients working as border images in any version of Firefox. Has anyone seen this work?
Reporter | ||
Comment 7•11 years ago
|
||
Confirmed, FF 29.0.1 still isn't working on Windows 7.
Reporter | ||
Updated•11 years ago
|
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
Reporter | ||
Comment 8•11 years ago
|
||
Just checked on FF 31 Nightly and it's not working there either. Reference: http://jsfiddle.net/KZSLH/1/
Comment 9•11 years ago
|
||
After further fiddling, I discovered that FF requires the border-style to be set for this to work. So really the issue is that Mozilla doesn't default the border style to solid when a border image is used. Webkit does that automatically and it would be nice if Mozilla did the same.
To make your example work add: border-style: solid;
and change '-webkit-radial-gradient' to '-moz-radial-gradient'
Comment 10•11 years ago
|
||
I've confirmed it only works when border-style is "solid," not with dots or dashes either. So yeah, the only problem is that border-style property should default to 'solid' when the element is using a border image.
Reporter | ||
Comment 11•11 years ago
|
||
Oh ****, I forgot about the style requirement. I looked back at initial test, my bad. Testing the Fiddle in Comment 3, everything is working. The spec should supersede Chrome's usage here, probably, so I'm returning this to resolved.
Status: UNCONFIRMED → RESOLVED
Closed: 11 years ago → 11 years ago
Resolution: --- → INVALID
Reporter | ||
Updated•11 years ago
|
Resolution: INVALID → WORKSFORME
Comment 12•11 years ago
|
||
joshrenaud@gmail.com, what Chrome and WebKit implement is a very early draft of the border-image spec. What we implement is the current draft, which makes border-style have its usual effect even if border-image is used, so you can control the border showing up or not in the normal way.
Resolution: WORKSFORME → DUPLICATE
Comment 13•11 years ago
|
||
And I guess I'd already said all that in comment 2. I'd really appreciate you reading the bug before commenting next time. And me reading the bug before commenting next time... ;)
You need to log in
before you can comment on or make changes to this bug.
Description
•