8

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:

everything's okay

Something gets an outline:

bug is clearly visible

And then without outline:

enter image description here

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).

Community
  • 1
  • 1
Klaster_1 Нет войне
  • 11,790
  • 9
  • 61
  • 73

2 Answers2

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;
}
Adam McElroy
  • 458
  • 1
  • 3
  • 10
0

I've noticed this bug or similar in chrome too. relating to -webkit-clip-path. I've looked and there doesn't seem to be an issue raised (https://code.google.com/p/chromium/issues/list). Your test no longer seems to work as you described.

Paul Smith
  • 101
  • 5