Semantic-Org/Semantic-UI · warning

Element is hidden, you must call refresh after element becom

Error message

Element is hidden, you must call refresh after element becomes visible

What it means

Semantic UI Visibility warning logged at visibility.js:101-102 during refresh(): if the element is not currently visible (module.is.visible() returns false), it cannot compute screen position, so it logs this notice telling the developer to call refresh once the element becomes visible (e.g. after a tab switch, modal open, or CSS display change).

Source

Thrown at src/definitions/behaviors/visibility.js:1306

  onUnfixed              : function() {},

  // utility callbacks
  onUpdate               : false, // disabled by default for performance
  onRefresh              : function(){},

  metadata : {
    src: 'src'
  },

  className: {
    fixed       : 'fixed',
    placeholder : 'placeholder',
    visible     : 'visible'
  },

  error : {
    method  : 'The method you called is not defined.',
    visible : 'Element is hidden, you must call refresh after element becomes visible'
  }

};

})( jQuery, window, document );

View on GitHub (pinned to 597843ab84)

Solutions

  1. Call $('.el').visibility('refresh') after the element becomes visible (e.g. on tab 'onVisible' callback).
  2. Defer $('.el').visibility() initialization until the parent container is shown.
  3. If the warning is expected in production, set silent:true on visibility settings to suppress it.

Example fix

// before
$('.ad').visibility(); // parent tab hidden at init
// after
$tab.on('click', function(){
  setTimeout(function(){ $('.ad').visibility('refresh'); }, 0);
});
Defensive patterns

Strategy: validation

Validate before calling

function ensureVisibleThenInit($el, opts) {
  if (!$el.is(':visible')) {
    var observer = new MutationObserver(function(){
      if ($el.is(':visible')) { $el.visibility(opts); observer.disconnect(); }
    });
    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['class','style','hidden'] });
    return;
  }
  $el.visibility(opts);
}

Type guard

function isElementVisible($el) { return $el.length > 0 && $el.is(':visible'); }

Prevention

When it happens

Trigger: Initializing .visibility() on an element inside a hidden tab, accordion section, collapsed modal, or display:none ancestor; toggling visibility at runtime without calling $('.el').visibility('refresh') afterward.

Common situations: Lazy-loaded or conditionally-shown content; SPA route changes that show/hide panels; CSS hiding via parent opacity/visibility/display; running visibility init before the layout is rendered.

Related errors


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