Jquery in Chrome Returns "Block" Instead of "Inline"

jQuery in Chrome returns block instead of inline

As I said in my comment, float: left forces display: block.

Here's the relevant information in the spec:

http://www.w3.org/TR/CSS21/visuren.html#propdef-float

The element generates a block box that
is floated to the left.

And then:

http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

Chrome + jQuery hide/show inline

I write a web store system in jsp, and a catch this error in last week. I think this problem is a caching problem, because a code works in Users.jsp, and same code not in Subjects.jsp. Both code work in FF, IE, Opera. Sometimes it works, sometimes not.
Use hide('slow'), it's same solution...

Webkit JQuery Mobile block to inline Transition Not Functioning

I believe I've found the answer...

Original:

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <span class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </span>
      </td>
</tr>

It appears that having a span wrap a div causes undesirable action in webkit when you try to change the layout on the containing div.

Change: (div tag below 2nd td)

<tr class="StatsRow">
     <td class="description">Total Sales</td>
     <td class="stat">
          <div class="TotalSalesRow">
               <strong>$59,549.16</strong>
               <div class="wrapStat">
                    <span class="pastStat">($59,799.66)</span>
                    <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease">
                    <span class="decreasedStat">0.42%</span>
               </div>
          </div>
      </td>
</tr>

jQuery .css not working only in Chrome

I have confirmed that this is the deal here: z-index not properly rendered on iPad and Google Chrome 22

Stacking contexts. In Chrome, "A stacking context is formed, anywhere in the document, by any element which is either

the root element (HTML),
positioned (absolutely or relatively) with a z-index value other than "auto",
elements with an opacity value less than 1. (See the specification for opacity)

"
In my case, the div#bg4-1 is inside a fixed div so that kills is ability to recede behind the entire page. Bullocks.

jquery show/hide when using inline-block

You could make an extension to jQuery...

$.fn.showInlineBlock = function () {
    return this.css('display', 'inline-block');
};

Useage would be:

$('#whatever').showInlineBlock();

jsFiddle Demo

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

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.

jQuery position problem with Chrome

Webkit based browsers (like Chrome and Safari) can access images width and height properties only after images have been fully loaded. Other browsers can access this information as soon as just the DOM is loaded (they don't need to load the images entirely to know their size).

So, if you have images in your page, with Webkit based browsers you should access offset information after the $(window).load event fires, and not after the $(document).ready event.

jQuery .show() adds style= display:inline-block to elements

Explicitly set the style for the visibility the way you want it: don't rely on hide() and show():

element.css('display', 'none'); equivalent of hide()
element.css('display', 'inline-block'); equivalent of show()
element.css('display', 'block'); What you want

---

Related Topics