Had to add pusher element. For optimal performance make sure

Error message

Had to add pusher element. For optimal performance make sure body content is inside a pusher element

What it means

Emitted by Sidebar's setup.layout() (sidebar.js:322-324) when the context has no child matching selector.pusher ('.pusher'). Sidebar self-heals: it creates a <div class="pusher">, wraps the non-omitted body children into it, refreshes, then logs this as a layout/performance advisory. Functionally harmless but signals non-optimal markup. It is a console.error (sidebar.js:818), not thrown.

Source

Thrown at src/definitions/modules/sidebar.js:1024

    visible   : 'visible'
  },

  selector: {
    fixed   : '.fixed',
    omitted : 'script, link, style, .ui.modal, .ui.dimmer, .ui.nag, .ui.fixed',
    pusher  : '.pusher',
    sidebar : '.ui.sidebar'
  },

  regExp: {
    ios          : /(iPad|iPhone|iPod)/g,
    mobileChrome : /(CriOS)/g,
    mobile       : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
  },

  error   : {
    method       : 'The method you called is not defined.',
    pusher       : 'Had to add pusher element. For optimal performance make sure body content is inside a pusher element',
    movedSidebar : 'Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag',
    overlay      : 'The overlay setting is no longer supported, use animation: overlay',
    notFound     : 'There were no elements that matched the specified selector'
  }

};


})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

Add <div class="pusher"></div> as a direct child of body containing your page content.
Keep the sidebar and the pusher as direct children of the same context element.

Example fix

<!-- before -->
<body>
  <div class="ui sidebar"></div>
  <div id="app">content</div>
</body>
<!-- after -->
<body>
  <div class="ui sidebar"></div>
  <div class="pusher">
    <div id="app">content</div>
  </div>
</body>

Defensive patterns

Strategy: validation

Validate before calling

// Provide correct markup so the auto-push path never runs.
function ensurePusher($ctx){
  if ($ctx.children('.pusher').length === 0) {
    $ctx.wrapInner('<div class="pusher"></div>');
  }
}
// Prefer authoring the .pusher in HTML directly.

Prevention

Always author a <div class="pusher"> as a direct child of body containing page content.
This is self-healing (sidebar.js:325-332) — the log is advisory, not a real failure.
Keep sidebar and pusher as direct children of the same context.

When it happens

Trigger: $('.sidebar').sidebar() on a <body> that has no .pusher element, so the guard at sidebar.js:322 triggers the auto-create path.

Common situations: Forgetting the <div class="pusher"> wrapper in page markup, custom templates that omit it.

Related errors

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/e3a418f1a59d86c0. Report an issue: GitHub.