jQuery `.is(“:visible”)` not working in Chrome

by

It seems jQuery’s :visible selector does not work for some inline elements in Chrome. The solution is to add a display style, like "block" or "inline-block" to make it work.

Also note that jQuery has a somewhat different definition of what is visible than many developers:

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.

In other words, an element must have a non-zero width and height to consume space and be visible.

Elements with visibility: hidden or opacity: 0 are considered visible,
since they still consume space in the layout.

On the other hand, even if its visibility is set to hidden or the opacity is zero, it’s still :visible to jQuery as it consumes space, which can be confusing when the CSS explicitly says its visibility is hidden.

Elements that are not in a document are considered hidden; jQuery does
not have a way to know if they will be visible when appended to a
document since it depends on the applicable styles.

All option elements are considered hidden, regardless of their
selected state.

During animations that hide an element, the element is considered
visible until the end of the animation. During animations to show an
element, the element is considered visible at the start at the
animation.

The easy way to look at it, is that if you can see the element on the screen, even if you can’t see its content, it’s transparent etc., it’s visible, i.e. it takes up space.

I cleaned up your markup a little and added a display style (i.e. setting the elements display to “block” etc), and this works for me:

FIDDLE

Official API reference for :visible

As of jQuery 3, the definition of :visible has changed slightly

jQuery 3 slightly modifies the meaning of :visible (and therefore of
:hidden).
Starting with this version, elements will be considered
:visible if they have any layout boxes, including those of zero width
and/or height. For example, br elements and inline elements with no
content will be selected by the :visible selector.

More Related Contents:

  1. How can I use jQuery in Greasemonkey scripts in Google Chrome?
  2. Click event on select option element in chrome
  3. Why does Chrome ignore local jQuery cookies?
  4. The specified value does not conform to the required format yyyy-MM-dd
  5. WebKit issues with event.layerX and event.layerY
  6. How to get a cookie from an AJAX response?
  7. jQuery .load() not working in Chrome
  8. How do I auto-hide placeholder text upon focus using css or jquery?
  9. jQuery .attr(“disabled”, “disabled”) not working in Chrome
  10. How do you stop Chrome and Opera sorting JSON objects by Index ASC?
  11. How to bind to localStorage change event using jQuery for all browsers?
  12. Distinguish Chrome from Safari using jQuery.browser
  13. What makes a jQuery object show up as an array in Chrome’s Developer Tools?
  14. jquery ajax problem in chrome
  15. Chrome showing error as: Refused to execute inline script because of Content-Security-Policy
  16. Weird Chrome prototype/jQuery conflict
  17. CORS request – why are the cookies not sent?
  18. How to make Chrome remember password for an AJAX form?
  19. Selecting text on focus using jQuery not working in Safari and Chrome
  20. Extension refuses to load the script due to Content Security Policy directive
  21. How to detect if a browser is Chrome using jQuery?
  22. Google Chrome viewport-anchored expand direction with flexbox
  23. jQuery behaving strange after page refresh (F5) in Chrome
  24. How do I console.log a jQuery DOM Element in Chrome?
  25. Custom CSS to allow chrome textarea resize smaller than initial state?
  26. Chrome file upload bug: on change event won’t be executed twice with the same file
  27. Accessing functions bound to event handlers with jQuery
  28. how to prevent blur() running when clicking a link in jQuery?
  29. Force a checkbox to always submit, even when unchecked
  30. jQuery detect click on disabled submit button

Leave a Comment