Chrome -webkit-clip-path and outline bug

Question

I've found rather strange behaviour in Chrome's (30.0.1599.69) -webkit-clip-path and want to know if it's a bug or not.

When element has clip-path set to rectangle, and then something on the page gets ouline (for example, due to focus), clip-path shifts vertically. After outline is removed, clip-path doesn't take previous position.

A page to reproduce it.

Intial state:

Something gets an outline:

And then without outline:

Note: since further outline changes don't affect the clipping, it can be used for our advantage to "fix" the issue by applying an outline of known height and then offseting clip-path for this value.

Update:

An issue in Chromium bugtracker.

I've found out that rectangle() support was removed, but not sure from what versions (does iOS still have it?). polygon() version works fine here in Canary (at April 17, 2014).

Answer 1

That does look like a bug in Chrome. I'm not sure if you're just asking if this looks like a bug or if it's actually a nuisance for you in a project you're working on. In case of the latter, you can get around the bug you've found by removing the standard Chrome outline on focus, and optionally replacing it with a box shadow if you'd like it to look the same. For example:

input:focus {
    outline: none;

    // Optionally do something like this
    -webkit-box-shadow: 0 0 4px blue;
    -moz-box-shadow: 0 0 4px blue;
    box-shadow: 0 0 4px blue;
}