AgentRules.org
RulesStacksClientsAuditorPrunerSelf-HealRFCsBenchmarkCLICI/CDAuthorsSubmit
This specification is maintained by the AgentRules Working Group. Have enhancements or want to claim maintainership?Submit Specification →
mobilecritical PriorityID: capacitor-7-android-15-edge-to-edge-inset-sync

Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization

Android 15 (API level 35) enforces edge-to-edge window layout by default, extending hybrid WebViews underneath system status bars and gesture navigation bars. Without deterministic viewport configuration and safe-area inset synchronization, primary interactive elements such as bottom navigation bars and floating buttons become occluded and unclickable. This guardrail mandates viewport-fit declarations, CSS environment variable injection, and automated safe-area fallback token management across Capacitor 7 hybrid web applications.

Prohibited Anti-Pattern: Unpadded Viewport Submersion and Gesture Inset Occlusion Under Android 15 System Bars

Export Ready-to-Drop Configuration

Select format below to copy code or download file directly.

---
description: Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization - Android 15 (API level 35) enforces edge-to-edge window layout by default, extending hybrid WebViews underneath system status bars and gesture navigation bars. Without deterministic viewport configuration and safe-area inset synchronization, primary interactive elements such as bottom navigation bars and floating buttons become occluded and unclickable. This guardrail mandates viewport-fit declarations, CSS environment variable injection, and automated safe-area fallback token management across Capacitor 7 hybrid web applications.
globs: src/**/*.{ts,tsx,js,jsx}, src/**/*.{css,scss}, index.html, capacitor.config.ts
alwaysApply: true
verified_by: "agentrules.org"
license: "CC-BY-4.0"
source: "https://agentrules.org/rules/capacitor-7-android-15-edge-to-edge-inset-sync"
---

# Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization

> **Severity**: CRITICAL | **Category**: mobile
> **Anti-Pattern Warning**: Unpadded Viewport Submersion and Gesture Inset Occlusion Under Android 15 System Bars

## System Constraints
You are a Principal Mobile Architect enforcing Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization. Android 15 (targetSdkVersion 35) permanently deprecates opt-out flags for edge-to-edge rendering, drawing WebView containers directly beneath system status bars and the gesture navigation bar. You must mandate strict viewport-fit declarations, explicit safe-area CSS variable application, and dynamic fallback tokens for web engines where env() evaluates to zero.

## Strict Guidelines
- Engineers MUST ALWAYS include `viewport-fit=cover` in the `<meta name="viewport">` tag within `index.html` to enable safe area calculations.
- Engineers MUST ALWAYS apply `env(safe-area-inset-top)` and `env(safe-area-inset-bottom)` to root or anchored interface components (e.g., top bars, bottom tab navigation, floating action buttons).
- Engineers MUST NOT hardcode pixel values (e.g., `padding-bottom: 16px;`) for layout containers that anchor to screen boundaries without adding the corresponding `env(safe-area-inset-*)` value.
- Code SHOULD define CSS fallback custom properties (e.g., `calc(16px + env(safe-area-inset-bottom, 0px))`) to handle platform discrepancies and desktop web testing.
- Components NEVER attach absolute bottom interactive controls without computing safe-area offsets, preventing interception by Android 15's 3-button or gesture navigation overlays.
- Services MUST synchronize system bar styling using `@capacitor/status-bar` and bridge native window insets dynamically if custom CSS variables are utilized across the application.

## Bad vs Good Implementations
### Anti-Pattern: Hardcoded Layout Anchors and Missing Viewport Fit

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Without `viewport-fit=cover` and dynamic safe-area insets, Android 15 renders the WebView edge-to-edge. The 56px footer sits behind the system navigation bar, rendering the buttons unclickable or obstructed by gesture pill indicators.
```typescript
// index.html: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
// React / Web Component styles
import React from 'react';

export const BottomNavigation: React.FC = () => {
  return (
    <footer
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        height: '56px',
        backgroundColor: '#ffffff',
        // Fails on Android 15: The gesture bar renders directly over navigation actions
        paddingBottom: '8px'
      }}
    >
      <button onClick={() => console.log('Home')}>Home</button>
      <button onClick={() => console.log('Profile')}>Profile</button>
    </footer>
  );
};
```

#### Production Standard (Correct)
> **Standard**: Incorporates `viewport-fit=cover` and calculates `paddingBottom` using `calc(8px + env(safe-area-inset-bottom, 0px))`, pushing interactive targets safely above the Android 15 gesture navigation handle.
```typescript
// index.html: <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
// React / Web Component styles using safe-area tokens
import React from 'react';

export const BottomNavigation: React.FC = () => {
  return (
    <footer
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#ffffff',
        // Android 15 safe-area synchronized layout
        paddingTop: '8px',
        paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))',
        paddingLeft: 'env(safe-area-inset-left, 0px)',
        paddingRight: 'env(safe-area-inset-right, 0px)',
        boxSizing: 'content-box'
      }}
    >
      <div style={{ display: 'flex', height: '56px', alignItems: 'center', justifyContent: 'space-around' }}>
        <button type="button" onClick={() => console.log('Home')}>Home</button>
        <button type="button" onClick={() => console.log('Profile')}>Profile</button>
      </div>
    </footer>
  );
};
```

### Dynamic Inset Token Synchronization Service

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Relying purely on legacy status bar overlay flags fails on Android 15, which forces full window-insetting including bottom navigation bars without updating CSS custom properties.
```typescript
// Service assuming Status Bar handles all Android insets automatically
import { StatusBar, Style } from '@capacitor/status-bar';

export async function initSystemBars() {
  // In Android 15, overlaysWebView is obsolete/default; this does not handle gesture insets
  await StatusBar.setOverlaysWebView({ overlay: true });
  await StatusBar.setStyle({ style: Style.Dark });
}
```

#### Production Standard (Correct)
> **Standard**: Synchronizes status bar styles gracefully and provisions responsive CSS custom property fallbacks that evaluate correctly under Android 15 API 35 window rendering pipelines.
```typescript
import { Capacitor } from '@capacitor/core';
import { StatusBar, Style } from '@capacitor/status-bar';

export async function initializeAndroidEdgeToEdge(): Promise<void> {
  if (Capacitor.getPlatform() !== 'android') {
    return;
  }

  try {
    // Ensure status bar icons contrast against the application background theme
    await StatusBar.setStyle({ style: Style.Light });
  } catch (error) {
    console.warn('StatusBar styling unavailable:', error);
  }

  // Establish resilient CSS tokens reflecting runtime window insets
  const root = document.documentElement;
  const syncInsets = () => {
    // CSS env() handles standard insets; bind fallback CSS variables for older WebViews
    root.style.setProperty('--safe-area-top', 'env(safe-area-inset-top, 0px)');
    root.style.setProperty('--safe-area-bottom', 'env(safe-area-inset-bottom, 0px)');
  };

  syncInsets();
  window.addEventListener('resize', syncInsets, { passive: true });
}
```
Recommended MCP Servers (mcp-serverlist.com)

Equip agent with system tools to verify code for this stack.

Android Layout Inspector MCP
Validates live Android layout boundaries and window inset consumption across hybrid views.
Recommended Agent Skills (askills.dev)

Ready-to-use executable skill functions tailored to this stack.

Capacitor CLI Doctor
Inspects and diagnoses Capacitor Android platform configurations and SDK build targets.
Architectural Specification & Invariant Rationale

Architectural Invariant Design: Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization

Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization defines an industrial-grade behavioral standard for mobile engineering. Android 15 (API level 35) enforces edge-to-edge window layout by default, extending hybrid WebViews underneath system status bars and gesture navigation bars. Without deterministic viewport configuration and safe-area inset synchronization, primary interactive elements such as bottom navigation bars and floating buttons become occluded and unclickable. This guardrail mandates viewport-fit declarations, CSS environment variable injection, and automated safe-area fallback token management across Capacitor 7 hybrid web applications. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: Unpadded Viewport Submersion and Gesture Inset Occlusion Under Android 15 System Bars Without an explicit system instruction file, developers spend hours debugging silent failures.
Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure ModeAI Symptom (The Anti-Pattern)SeverityProduction Impact & Remedy
AI Hallucination & Deprecation DriftUnpadded Viewport Submersion and Gesture Inset Occlusion Under Android 15 System BarsCritical
Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production.
Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture InconsistencyAI assistants produce mixed paradigms across files, creating fragmented codebase conventions.Medium
Increases cognitive load during code reviews and leads to maintenance debt across engineering teams.
Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.
Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

1

Engineers MUST ALWAYS include `viewport-fit=cover` in the `<meta name="viewport">` tag within `index.html` to enable safe area calculations.

Engineers MUST ALWAYS include `viewport-fit=cover` in the `<meta name="viewport">` tag within `index.html` to enable safe area calculations.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
2

Engineers MUST ALWAYS apply `env(safe-area-inset-top)` and `env(safe-area-inset-bottom)` to root or anchored interface components (e.g., top bars, bottom tab navigation, floating action buttons).

Engineers MUST ALWAYS apply `env(safe-area-inset-top)` and `env(safe-area-inset-bottom)` to root or anchored interface components (e.g., top bars, bottom tab navigation, floating action buttons).

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
3

Engineers MUST NOT hardcode pixel values (e.g., `padding-bottom

Engineers MUST NOT hardcode pixel values (e.g., `padding-bottom: 16px;`) for layout containers that anchor to screen boundaries without adding the corresponding `env(safe-area-inset-*)` value.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
4

Code SHOULD define CSS fallback custom properties (e.g., `calc(16px + env(safe-area-inset-bottom, 0px))`) to handle platform discrepancies and desktop web testing.

Code SHOULD define CSS fallback custom properties (e.g., `calc(16px + env(safe-area-inset-bottom, 0px))`) to handle platform discrepancies and desktop web testing.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
5

Components NEVER attach absolute bottom interactive controls without computing safe-area offsets, preventing interception by Android 15's 3-button or gesture navigation overlays.

Components NEVER attach absolute bottom interactive controls without computing safe-area offsets, preventing interception by Android 15's 3-button or gesture navigation overlays.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
6

Services MUST synchronize system bar styling using `@capacitor/status-bar` and bridge native window insets dynamically if custom CSS variables are utilized across the application.

Services MUST synchronize system bar styling using `@capacitor/status-bar` and bridge native window insets dynamically if custom CSS variables are utilized across the application.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is Capacitor 7 Android 15 Edge-to-Edge System Inset Synchronization critical for AI coding assistants?

Android 15 (API level 35) enforces edge-to-edge window layout by default, extending hybrid WebViews underneath system status bars and gesture navigation bars. Without deterministic viewport configuration and safe-area inset synchronization, primary interactive elements such as bottom navigation bars and floating buttons become occluded and unclickable. This guardrail mandates viewport-fit declarations, CSS environment variable injection, and automated safe-area fallback token management across Capacitor 7 hybrid web applications. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (Unpadded Viewport Submersion and Gesture Inset Occlusion Under Android 15 System Bars) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

Open Specification · CC BY 4.0·Free for Personal, Team & Commercial In-Repo Use

Citation & Open Source Attribution Guidelines

This specification is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You are completely free to adapt and share this rule in your workspace. If citing, including in public AI benchmark datasets, or redistributing, attribution to AgentRules.org is required.

Related MOBILE Rules

View all rules →
mobile
106

Tauri 2.0 Mobile IPC & Capabilities Permissions Matrix Standard

Tauri v2 introduces a capability-driven permissions system replacing legacy v1 allowlists across iOS and Android runtimes. Failure to constrain IPC command handlers with typed schemas and explicit mobile capability definitions exposes native mobile OS surfaces to arbitrary code execution, permission leakage, and silent serialization failures. Production mobile deployments require strictly typed IPC boundary validation, granular capability scopes, and graceful permission degradation.

mobile
70

Capacitor 7 Native Bridge, Biometric Auth & Android 15 Lifecycle Production Standard

Capacitor 7 enforces strict bridge lifecycle contracts, asynchronous native plugin interop, and mandatory Android 15 edge-to-edge window inset handling. Storing sensitive authentication tokens in unencrypted web storage or failing to bind biometric authentication directly to hardware-backed Keystore or Secure Enclave mechanisms compromises app integrity and causes fatal crash or viewport occlusion issues on modern mobile operating systems.

mobile
58

Tauri 2.0 Mobile IPC Isolation and Capabilities Permission Scoping

Enforces strict capability permission boundaries, payload validation, and secure IPC invoke scoping for Tauri v2 Android and iOS environments. Prevents arbitrary IPC command execution, excessive native privilege granting, and deserialization vulnerabilities across the mobile webview-native boundary.

1 Rule in Stack

Capacitor