Re: 'border-image' confusion

On Jan 25, 2011, at 7:08 AM, Eric A. Meyer wrote:

>   In case that last assertion seems dubious, I put a 'border-image' scenario to the readers of meyerweb[1].  A number of them came up with the right answer but complained about the property being very counter-intuitive.  Others hacked around the problem entirely using other methods because they couldn't figure out how to do what I specified, or couldn't figure out how 'border-image' was supposed to work in the first place.  (And a couple of people got it to work in WebKit, but we're still not sure if that was a bug exploit or not.[2])

> I can't see a good reason why it should behave as it does now, where slices get replaced with transparency if your slices exceed half the height/width of the base image.  Note that WebKit already does this, but other browsers do not.

> [1] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/
> [2] http://meyerweb.com/eric/thoughts/2011/01/24/border-imaging/#comment-531046

The webkit implementation is based on an older and less mature version of the spec. Firefox is doing it correctly according to the spec, as follows:

# The regions given by the ‘border-image-slice’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values. [1]

I don't recall exactly why we decided on that.


1. http://www.w3.org/TR/css3-background/#the-border-image-slice

Received on Tuesday, 25 January 2011 15:46:16 UTC