Setting display-property via jQuery - not working in Chrome?

Question

I have the following problem. I have this jQuery script:

$(document).ready(function () {
    $("thead.opening").click(function () {
        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
        alert("INTO second function, chrome: " + is_chrome);
        $(this).next().css('width', '10000000 em');
        $(this).next().css('display', 'table-row-group');
        alert($(this).next().css('display'));
    })
});

When the user is clicking on the thead (having class="opening") of a table and this CSS is set to the tbody element of the same table (represented by $(this).next()):

style="display: table-row-group;

This works fine for FireFox and Internet Explorer but it doesn't work in Chrome.

I've obtained the following behavior (as you can see in the previous code snippet I have put some alert() to debug the code):

1. INTO second function, chrome: true

2. Then it is sets the CSS property as I expect:

   $(this).next().css('display', 'table-row-group');
   

   and when perform the second alert() that represent the CSS settings for my tbody element:

   $(this).next().css('display', 'table-row-group');
   

   it print the expected value: table-row-group and it is correctly sets because I see the alert popup and under it my page correctly rendered

3. When I click on the OK button of the alert popup it disappear and my tbody element have some visualization problem, in particular what happens is that the tbody element have set style="display: block;" instead style="display: table-row-group;", this is my obtained tbody

Seems as Chrome first correctly sets the display: table-row-group;" (because I see the tbody element in the correct position under the second alert popup) and then automatically sets it to display: block;" when the Ok button of this popup is clicked.

Why? What am I missing? How can I fix this behavior?

Thanks

Answer 1

10000000 em

will cause error in css.

change it to 10000000em

http://jsfiddle.net/Mephiztopheles/0nh72pg0/ when you try this link, will it also remove the table display?
any other functions which could remove style properties?
are both style properties removed?