Bug 70871 - REGRESSION: Border-image shows all but center portion of image (if unprefixed property present)
Summary: REGRESSION: Border-image shows all but center portion of image (if unprefixed...
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P1 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2011-10-25 22:59 PDT by Ryosuke Niwa
Modified: 2012-07-12 14:43 PDT (History)
4 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Ryosuke Niwa 2011-10-25 22:59:18 PDT
What steps will reproduce the problem?
1. Pull up http://assortedgarbage.com ... Look at the main blog post area. In Chromium and Canary, the central portion of the border-image is invisible. 

2. Inspect the article element. Turn OFF the regular border-image property (leaving only the -webkit- prefixed property). The center reappears. 

3. Turn off the -webkit prefixed property & the entire image disappears. 

What is the expected result?
The background of the main blog post area should look like the "paper" the rest of the site is made of.

What happens instead?
Central area of the blog post (using border-image) is missing. In the current stable version of Chrome, it's perfect.

Please provide any additional information below. Attach a screenshot if
It appears Canary is attempting to use the unprefixed border-image property and is rendering it incorrectly (though it still renders properly with the -webkit prefix).

Comment 1 Ryosuke Niwa 2011-10-25 23:00:40 PDT
Comment 2 David Barr 2011-11-15 19:46:02 PST
The issue is that WebKit now honors the spec with regard to the initial value for border image slice.

So to get the intended result, the style rules need to be updated to include the 'fill' keyword just after the slice values. Note that FF rejects the 'fill' keyword on the -moz-border-image property and WebKit ignores it on -webkit-border-image.

.post {
	margin: 0 0 40px 0;
	-webkit-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
	-moz-border-image: url(images/article-background-stretch.png) 29 50 55 32 round round;
	border-image: url(images/article-background-stretch.png) 29 50 55 32 fill round round;
	border-width: 29px 50px 55px 32px;
Comment 3 Theresa O'Connor 2012-07-12 14:43:14 PDT
Comment 4 Theresa O'Connor 2012-07-12 14:43:49 PDT
WebKit's unprefixed border-image behaves as specified.