0

I believe all browsers by default use background-clip: border-box;. This seems to be default behavior.

When using: http://www.colorzilla.com/gradient-editor/ it specifies filter as the final property. When using IE9 the background bleeds out of the border, and the border-clip property becomes ineffective.

Here is a fiddle to illustrate: http://jsfiddle.net/tPDMb/3/

I ended up just removing the filter statement for now, but that causes ie9 and lower to not have a background gradient at all.

Has anyone else ran into this issue?

Parris
  • 17,833
  • 17
  • 90
  • 133

1 Answers1

1

You're correct in stating the default behavior is to clip to the border box, The initial value of background-clip is indeed border-box.

The problem is that IE filters are not true CSS background layers. As such, an IE gradient filter will ignore all background and border positioning/clipping properties like background-clip, background-position and border-radius. Unfortunately, this is by design; the only way to get a gradient background working in IE9 and lower while respecting these properties is to use a pre-rendered gradient image. If you need to support older IEs just replace the SVG part that ColorZilla provides with a PNG image or similar.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356