New issue
Advanced search Search tips

Issue 811848 link

Starred by 3 users

Issue metadata

Status: Duplicate
Merged: issue 767352
Owner: ----
Closed: Feb 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Android , Windows , Chrome , Mac , Fuchsia
Pri: 2
Type: Compat



Sign in to add a comment

CSS border-image not displayed without `fill' in border-image-slice

Reported by uebay...@tombiinc.com, Feb 13 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Example URL:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator

Steps to reproduce the problem:
1. Visit the site (MDN ``Border-image generator'')
2. Choose one of the 6 sample images
3. Click `fill' button in `border-image-slice' box and see what happens

What is the expected behavior?
Chrome always displays border images even without `fill' in `border-image-slice' is set.

What went wrong?
Chrome doesn't display border-image at all if `fill' is not set.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 64.0.3282.140  Channel: stable
OS Version: OS X 10.13.3
Flash Version:
 

Comment 1 by cnardi@chromium.org, Feb 13 2018

Components: Blink>Layout
Labels: Hotlist-Interop OS-Android OS-Chrome OS-Fuchsia OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Interesting, it seems that if a border is already specified (as in https://w3c-test.org/css/css-backgrounds/border-image-slice-percentage.html) this works. Disable the overridden border property in that page, and the image disappears.

Comment 2 by cnardi@chromium.org, Feb 13 2018

(you also need to throw a border-image-width in there for it to render on Firefox) Edge also seems to be doing whatever it is that we are.

Comment 3 by cnardi@chromium.org, Feb 13 2018

It looks like if you add a border-style, the image shows up: https://codepen.io/anon/pen/ZrJyZq. That isn't needed, and actually changes the rendering in Firefox.

Comment 4 by cnardi@chromium.org, Feb 13 2018

Components: -Blink>Layout Blink>CSS
This is actually probably style resolving. -webkit-border-image works correctly; not sure why the difference in output then.

Comment 5 by f...@opera.com, Feb 14 2018

Mergedinto: 767352
Status: Duplicate (was: Untriaged)
This look like a dupe of issue 767352 (border-image-width is specified as 20px, and thus not relative to the [resolved] border-width - which would be 0.)

As for -webkit-border-image, it has 'fill' set by default while the unprefixed property (short- or longhand) doesn't.

Sign in to add a comment