CODEWITHSUNDEEP
css
Nope
Nope

Reputation: 22329

border-image renders differently between Chrome and FireFox

I'm currently playing around with CSS3 border-image and noticed that there are differences in how the image is applied between Chrome and FireFox (latest versions).

I have a very basic example I'm messing around with whereby I'm applying the border-image to some textarea tags to study the different effects.

In FireFox the image is split into the sections and applied to the border sections as expected. The center is transparent as I would expect.

In Chrome it does the same with the borders but also shows the center of the image.

Is there some default setting/style which a browser applies, causing the transparency in one browser but not he other?

Is that a setting/style I can override?

The Fiddle

Edit

I suppose, seeing that the browsers simply just do that, if one can't ove-write the behaviour in CSS, what could I do to ensure the images are applied the same between the 2 browsers?

In case the fiddle goes stale I included the code below as well.

The HTML:

<textarea class="no-image">some default text</textarea>
<textarea class="stretch">some default text</textarea>
<textarea class="round">some default text</textarea>
<textarea class="repeat">some default text</textarea>​

The CSS:

textarea{
    border: 50px solid #feb515;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    width: 500px;
    height: 100px;
    padding: 15px;
    border-image-slice: 5;
}

textarea.stretch{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
}


textarea.round{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
}

textarea.repeat{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
}​

Upvotes: 4

Views: 2655

Answers (1)

quoo
quoo

Reputation: 6307

So I've gotten it working - I'm not sure why it's working though.

http://jsfiddle.net/6ysfr/2/

I think it may be that your border width needs to match up with the number specified in border-image, and I think border-image-slice may be messing things up.

Nevermind - i think it is exactly as you say - using border-image-slice causes odd behavior with the 'fill' in chrome. My example works because it is missing the offset of the border slices.

Upvotes: 1

Related Questions