jQuery is visible not working in Chrome

Question

if      makespan   is   visible      true         var make       make   val       else       var make       othermake   val        Make  lt span id makespan gt  lt select id make gt  lt  select gt  lt span id othermakebutton class txtbutton gt Other  lt  span gt  lt  span gt  lt span id othermakespan style  display  none   gt  lt input type text name othermake id othermake gt  amp nbsp - amp nbsp  lt span id othermakecancel class txtbutton gt Cancel lt  span gt  lt  span gt    The above code runs smooth in Firefox  but doesn t seem to work in Chrome  In Chrome it shows  is   visible     false even when it is true   I am using following jQuery version  jquery-1 4 3 min js  jsFiddle Link  http   jsfiddle net WJU2r 4

User · Answer

A cross browser version solution to determine whether an element is visible  is to add remove a css class to the element on show hide  The default visible  state of the element could be for example like this     lt span id  span1  class  visible  gt Span text lt  span gt   Then on hide  remove the class       span1   removeClass  visible   hide     On show  add it again       span1   addClass  visible   show     Then to determine whether the element is visible  use this   if      span1   hasClass  visible         do something    This also solves the performance implications  which may occur on heavy usage of the   visible  selector  which are pointed in jQuery s documentation      Using this selector heavily can have performance implications  as it may force the browser to re-render the page before it can determine visibility  Tracking the visibility of elements via other methods  using a class for example  can provide better performance    Official jQuery API Documentation for   visible  selector

User · Answer

This is the piece of code from jquery js which executes when is   visible   is called     if  jQuery expr  amp  amp  jQuery expr filters        jQuery expr filters hidden   function  elem             return   elem offsetWidth     0  amp  amp  elem offsetHeight     0        jQuery support reliableHiddenOffsets  amp  amp    elem style  amp  amp  elem style display     jQuery css  elem   display          none                jQuery expr filters visible   function  elem             return  jQuery expr filters hidden  elem               As you can see  it uses more than just the CSS display property  It also depends on the width and height of content of the element  Hence  make sure the element has some width and height  And for doing this  you may need to set the display property to  inline-block  or   block

User · Answer

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

User · Answer

If you read the jquery docs  there are numerous reasons for something to not be considered visible hidden   They have a CSS display value of none   They are form elements with type  hidden    Their width and height are explicitly set to 0   An ancestor element is hidden  so the element is not shown on the page   http   api jquery com visible-selector   Here s a small jsfiddle example with one visible and one hidden element   http   jsfiddle net tNjLb

User · Answer

Generally i live this situation when parent of my object is hidden  for example when the html is like this        lt div class  div-parent  style  display none  gt           lt div class  div-child  style  display block  gt           lt  div gt       lt  div gt    if you ask if child is visible like           div-child   is   visible      it will return false because its parent is not visible so that div wont be visible  also

User · Answer

I assume it has something to do with a quirk in our HTML because other places on the same page work just fine   The only way I was able to solve this problem was to do   if     element id   css  display       none           Take element is hidden action   else         Take element is visible action

User · Answer

I don t know why your code doesn t work on chrome  but I suggest you use some workarounds       el is   visible        el is   not  hidden       or     el is   visible         el is   hidden        If you are certain that jQuery gives you some bad results in chrome  you can just rely on the css rule checking      if  el css  display        none            i m visible     Plus  you might want to use the latest jQuery because it might have bugs from older version fixed

User · Answer

Internet Explorer  Chrome  Firefox     Cross Browser function  isVisible       check if exist and is visible function isVisible id        var element           id       if  element length  gt  0  amp  amp  element css  visibility        hidden   amp  amp  element css  display        none             return true        else           return false            Full example    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt           lt script src  http   code jquery com jquery-1 10 2 js  gt  lt  script gt           lt script type  text javascript  gt                check if exist and is visible             function isVisible id                    var element           id                   if  element length  gt  0  amp  amp  element css  visibility        hidden   amp  amp  element css  display        none                         return true                    else                       return false                                               function check id                    if  isVisible id                         alert  visible  true                      else                       alert  visible  false                                      return false                         lt  script gt            lt style type  text css  gt               fullname                  display  none                             vote                  visibility  hidden                         lt  style gt           lt title gt Full example  isVisible function lt  title gt       lt  head gt       lt body gt           lt div id  hello-world  gt              Hello World           lt  div gt           lt div id  fullname  gt              Fernando Mosquera Catarecha          lt  div gt           lt div id  vote  gt              rate it           lt  div gt           lt a href     onclick  check  hello-world     gt Check isVisible  hello-world   lt  a gt  lt br   gt  lt br   gt           lt a href     onclick  check  fullname     gt Check isVisible  fullname   lt  a gt  lt br   gt  lt br   gt           lt a href     onclick  check  vote     gt Check isVisible  vote   lt  a gt       lt  body gt   lt  html gt    Regards   Fernando

User · Answer

I added next style on the parent and  is   visible   worked      display  inline-block

User · Answer

There is a weird case where if the element is set to display  inline the jQuery check for visibility fails    Example   CSS   myspan  display  inline     jQuery      myspan   show       Our element is  inline  instead of  block      myspan   is   visible       This is false   To fix it you can hide the element in jQuery and than show hide or toggle   should work fine       myspan   hide       otherElement   on  click   function             myspan   toggle

User · Answer

I need to use visibility hidden insted of display none because visibility takes events  while display does not   So I do  attr  visibility        visible

User · Answer

If an item is child of an item that is hidden is   visible   will return true  which is incorrect   I just fixed this by added  display inherit  to the child item  This will fixed it for me    lt div class  parent  gt      lt div class  child  gt      lt  div gt   lt div gt    and the CSS    parent     display  hidden     child     display  inherit      Now the item can be effectively switched on and off by changing the visibility of the parent  and   element  is   visible   will return the visibility of the parent item

[jquery] jQuery `.is(":visible")` not working in Chrome

Examples related to jquery

Examples related to google-chrome