overflow-clip-box

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

SummaryEdit

The overflow-clip-box CSS property specifies relative to which box the clipping happens when there is an overflow.

On Gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. Prior to Firefox 29, this behavior was hardcoded; since then it uses this property that can be used elsewhere too. Note that this property is activated by default only in the UA stylesheet and chrome contexts.

Initial value	`padding-box`
Applies to	all elements
Inherited	no
Media	visual
Computed value	as specified
Animatable	no
Canonical order	the unique non-ambiguous order defined by the formal grammar

SyntaxEdit

/* Keyword values */
overflow-clip-box: padding-box;
overflow-clip-box: content-box;

/* Global values */
overflow-clip-box: inherited;
overflow-clip-box: initial;
overflow-clip-box: unset;

Values

padding-box: This keyword makes the clipping be related to the padding box.
content-box: This keyword makes the clipping be related to the content box.

Formal syntax

How to read CSS syntax.

padding-box | content-box

ExamplesEdit

padding-box

<div class="things">
  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
</div>

.scroll { 
  overflow: auto;
  padding: 0 30px; 
  width: 6em; 
  border: 1px solid black;
  background: lime content-box;
}

.padding-box {
  overflow-clip-box: padding-box;
}

function scrollSomeElements() {
  var elms = document.querySelectorAll('.scroll');
  for (i=0; i < elms.length; ++i) {
    elms[i].scrollLeft=80;
  }
}
var elt = document.queryElementsByTagName('body')[0];

elt.addEventListener("load", scrollSomeElements, false);

SpecificationsEdit

This property has been proposed to the W3C CSSWG; it is not yet on the standard track but, if accepted, should appear in CSS Overflow Module Level 3.

Feature	Firefox (Gecko)	Chrome	Internet Explorer	Opera	Safari (WebKit)
Basic support	29.0 (29.0)^[1]	No support	No support	No support	No support

[1] This property is controlled by the layout.css.overflow-clip-box.enabled preference, which defaults to false. It only is activated inside UA stylesheets and the chrome context. See bug 966992.