70871 2011-10-25 22:59:18 -0700 REGRESSION: Border-image shows all but center portion of image (if unprefixed property present) 2012-07-12 14:43:49 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) Unspecified Unspecified RESOLVED INVALID InRadar P1 Normal --- 1 rniwa webkit-unassigned davidbarr eoconnor hyatt paulirish oldest_to_newest 490574 0 rniwa 2011-10-25 22:59:18 -0700 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 possible. 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). http://chromium.googlecode.com/issues/attachment?aid=1013110000000&name=border-image-canary.jpg&token=b778969057aee8d9e7080cf85845023d&inline=1 490576 1 rniwa 2011-10-25 23:00:40 -0700 http://crbug.com/101311 503527 2 davidbarr 2011-11-15 19:46:02 -0800 The issue is that WebKit now honors the spec with regard to the initial value for border image slice. http://www.w3.org/TR/css3-background/#border-image-slice-fill 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; } 668247 3 eoconnor 2012-07-12 14:43:14 -0700 <rdar://problem/11765883> 668248 4 eoconnor 2012-07-12 14:43:49 -0700 WebKit's unprefixed border-image behaves as specified.