Closed Bug 988460 Opened 10 years ago Closed 10 years ago

Firefox doesn't recognize radial-gradients when used as a value for border-image.

Categories

(Core :: Layout, defect)

28 Branch
x86_64
Windows 7
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 709587

People

(Reporter: andymercer, Unassigned)

Details

(Keywords: css3)

Attachments

(1 file)

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.
Keywords: css3
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;
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: 10 years ago
Resolution: --- → WORKSFORME
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 → ---
Oh, in Firefox 28.  This was implemented in 29.  Try a current beta build.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago10 years ago
Resolution: --- → DUPLICATE
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?
Confirmed, FF 29.0.1 still isn't working on Windows 7.
Status: RESOLVED → UNCONFIRMED
Resolution: DUPLICATE → ---
Just checked on FF 31 Nightly and it's not working there either. Reference: http://jsfiddle.net/KZSLH/1/
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'
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.
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: 10 years ago10 years ago
Resolution: --- → INVALID
Resolution: INVALID → WORKSFORME
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
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.

Attachment

General

Creator:
Created:
Updated:
Size: