none
[Bug]IE9 skips cells when rendering large table from Ajax using jquery.

    Question

  • I'm working on a business application using ASP.Net MVC 3 that loads huge tables of data using jquery and ajax each table can possibly contain thousands of rows. This all works great in Firefox, Chrome, Opera, Safari and IE 7/8.

    However whenever I test my application using IE9 it skips some cells pushing the content to the right creating an extra column in the table in the process. I've checked, double checked and even triple checked my html, css and javascript, but I cannot find any errors in it. Plus as I mentioned earlier it works everywhere else including previous versions of IE.

    My tables always end up looking like the following:

    00000000

    0 0000000

    00000000

    00000 000

    I also know that it has something to do with ajax and rendering partial page updates because I tried loading the tables without any ajax while still keeping the rest of the javascript and then the table renders just fine. It also only seems to be a problem with browsing in IE9 mode changing browser mode or document mode to anything other than IE9 and the problem dissappears.

    It's really frustrating not being able to support the newest version of IE in my application does anyone know a workaround or will I have to force users that have updated to IE9 to browse in compatibility mode?
    • Edited by Sl0vi Wednesday, April 27, 2011 8:45 PM typos
    Wednesday, April 27, 2011 8:41 PM

Answers

All replies

  • Hi,

    Try the latest version of jQuery... 1.5.2...

    One frustrating issue I have come across in working with large data sets is first differences...check that your numeric fields are the precision that you require... viz.. currency fields are to the precision of the currency.... eg... you may have values that range from 10^12 to 10^-12, so for USD you would round to 10^-2, JPY and Lira to 0 decimal places. You have to do the rounding in your data rows, not in the output. Although with the limited information you provided this does not seem to be the root problem... Another guess would be your server's international settings... the sample data looks like it has been formatted to different locales.

    Definately there are issues with earlier versions of jQuery... the version of which you did not provide.... a link to your web site or a reproducable test case would be most helpful.

    Regards.


    Rob^_^
    Wednesday, April 27, 2011 11:23 PM
  • I'm using jquery 1.5.2 the application is developed in ASP.MVC 3 with Razor altho it really doesn't seem to matter since the problem isn't server side. And there are no problems with formatting I don't use datasets and I format all my data before displaying it.

    I'm running Windows 7 64bit with IE9, a colleague of mine is running Windows 7 32bit with IE9 and is having the same problem.

    The problem is very easy to recreate just make an ajax call for a partial view with a large table containing multiple tbody elements.

    I can't show you my business application but I have recreated the problem in a small test application that I have hosted on my site:

    http://www.voytsje.com

    You may have to scroll down a bit before you see a row with the error.

    The weird thing is that it seems to be completely random which rows are rendered wrong but when reloading the exact same data it's always the same rows that have the problem.

     

    edit: I've worked around the problem for now by adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the head element, if the application detects that the user is using IE9
    Thursday, April 28, 2011 12:37 PM
  • Hi,

    Thanks for the list to the sample page.... I do not work for MS, so it is inconvenient to create our own mashups from your descriptions.... the sample says it all..

    The issue seems to be with tbody (as you suspect)

    and there are a number of outstanding tickets on connect about this...

    https://connect.microsoft.com/IE/SearchResults.aspx?SearchQuery=tbody

    "edit: I've worked around the problem for now by adding <meta http-equiv="X-UA-Compatible" content="IE=8" /> to the head element, if the application detects that the user is using IE9"

    I am guessing, but other things you may try are

    adding a content type meta tag... see http://www.w3.org/International/O-charset (I know that html5 does not require this, but you will see an explanation at the w3c doco above).... when I inspect the innerHTML of the table rows that are squiff... there seems to be additional white space

    <TBODY id="type1_15">
    <TR>
    <TD>blpzflø3b4egde6c  </TD>
    <TD>   qi,,65zæ,177qf  </TD>
    <TD>   71,0258090035179  </TD>
    <TD>   25,3186194670008  </TD>
    <TD>   62,2167479070913  </TD></TR></TBODY>
    <TBODY id="type1_type2_15">
    <TR>
    <TD>   5706  </TD>
    <TD>   hmuok4  </TD>
    <TD>   6,68013634471229  </TD>
    <TD>   4,86653028282641  </TD>
    <TD>   16,0487857847702  </TD></TR>
    <TR>
    <TD>   8118  </TD>
    <TD>   q.xnwcnx6vlal9dt  </TD>
    <TD>   19,1544108256485  </TD>
    <TD>   3,51558092027697  </TD>
    <TD>   1,27448039747518  </TD></TR></TBODY>

    On the Networking tab of the Developer tool the XMLHTTP response content is in lowercase tags (unexpected since the accepted response content type is text/html) and the page source shows it with uppercase tags.

    I haven't fully read the release documentation for IE9, but you can find the IE9 Compatibility Cookbook here... http://msdn.microsoft.com/en-us/library/ff986083(v=vs.85).aspx

    Finally, If you like you can raise your own ticket at connect.microsoft.com/ie to pass the issue on to the IE Team for them to have a look at

    or

    One of the MSFT moderators here may jump in and make a comment.

    Regards.

     


    Rob^_^
    Friday, April 29, 2011 12:17 AM
  • I've raised a ticket on this on connect:

    https://connect.microsoft.com/IE/feedback/details/665694/ie9-skips-cells-when-rendering-large-table-with-multiple-tbody-elements-from-ajax-using-jquery

    Friday, April 29, 2011 9:48 AM
  • I just want to add that I have run in to exactly this problem. I am using Mootools 1.3 to get a large table of data via Ajax to render on screen. Every so often, columns will be missed out and data shifted. Can't reproduce the issue on any other browser or version of IE.

    Will there be a fix?

    I also managed to invoke the bug with a large static HTML table, with Mootools code to highlight every odd row.
    Wednesday, May 11, 2011 1:46 PM
  • I had the same problem as yours but my table was not so large.

    The problem came from space in the HTML template generated.

    I remove those spaces and problem was solved.

    Maybe it can help you :)

    • Proposed as answer by Gerfaut1 Friday, May 20, 2011 10:33 AM
    Thursday, May 19, 2011 7:03 AM
  • Remove all spaces and line breaks between your table element end tags and the start of the next table cell.  In other words, make the </td><td> on the same line, right next to each other with NO spaces in between.
    • Proposed as answer by chad3c Thursday, May 19, 2011 8:43 PM
    Thursday, May 19, 2011 8:28 PM
  • I got the same problem with an ajax call to serve a large table.

    The first thing I tried was to delete all spaces.

    This did not solved my incoerent rendering.

    I also tried all the suggestion in this thread but non of the action seemed to work!

    At last I also removed any spaces between the closing </td> and the next opening <td>; this tecnique was successfull!!!

    Hope this could be of help.

     

     



    • Proposed as answer by Light_Of_World Monday, December 05, 2011 11:53 PM
    Monday, June 13, 2011 10:30 AM
  • I'm having this same exact problem. I can't remove spaces and line breaks from my html because I am using HtmlTableRow and HtmlTableCell objects (adding cells to rows, and then adding rows to HtmlTable).

    When is Microsoft going to have this fixed?

    Tuesday, July 26, 2011 5:06 AM
  • I have fixed this problem by removing the <tfoot> element from my table. This is not a solution, but does identify the cause (for me at least).

    EDIT - It would appear that this is not a consistent cause. More troubleshooting shows that adding a single line of whitespace anywhere in the table can (potentially) trigger this problem

    Monday, August 08, 2011 3:44 PM
  • Hello,

    I am looking deeper into this issue, but the site http://www.voytsje.com seems to be down. Can you spin it back up, or perhaps paste a sample of the HTML that causes this issue for you? I tried the html from the response from IECUSTOMIZER, but I am not able to reproduce the issue.

    -John Jansen [MSFT]
    Senior Test Lead


    -John, Senior Test Lead, Internet Explorer
    Tuesday, September 13, 2011 7:33 PM
  • I also had this issue (or i think i did any way), and in a relatively small table. Curiously it would only happen after several steps were taken on the page. I tried fighting it off by assigning table widths, but removing spaces between <td> tags did eventually seem to fix it. However, next time i auto format it will break again.

    I put on table borders so I could see if an extra element was being rendered, but it's just a gap. Only three <td>s in that row and no errors in the table.

     

    Thursday, September 29, 2011 6:32 PM
  • Are there any fixes for this issue?
    Monday, October 17, 2011 10:30 PM
  • Joining this thread to hopefully raise more awareness and a sense of urgency to what is a significant issue. We build and market a web application serving the investment industry and have been steering clients away from IE because of IE9's inability to render dynamically generated table correctly. The tables render correctly in IE8, but it makes no intuitive sense to tell a client not to upgrade to the latest version of IE because this flaw. Furthermore, Microsoft's lack of responsiveness to this problem which was raised in this thread six months ago (and in numerous discussion forums elsewhere) lends little confidence to IE's viability going forward. I hope this issue will be resolved very soon, or we might just have to drop IE support for good.

     

     

    Wednesday, October 26, 2011 5:41 PM
  • It appears removing any whitespace between the </td> and <td> does give you a workaround.  I'm rendering a dynamic template using jquery templates and the behavior was not consistent; It would work at times and at other times a cell would be misplaced.  I had hopes that IE9 would bring IE to a better status among browsers.  This hope is fading....
    Tuesday, November 01, 2011 4:02 PM
  • I just wanted to add that I am having this issue as well!  

     

    I'm using asp.net MVC 2.0 to build the tables.   Taking out the spaces/linebreaks does fix the problem.  But that makes my views entirely un-readable and un-maintainable!

    any word on a solution for this?

    Thursday, November 10, 2011 3:00 PM
  • I am also seeing the same issue from time to time in an MVC 3 app. While I am using jQuery in parts of the app, I get the same issue on tables that are generated from pure MVC 3 using Razor: Occasionally a cell will be skipped over one column. The next row is usually fine.

     

    This problem happens only on IE9. Have tested it using several competing browsers (On both Windows and Linux), as well as even IE 6 on Windows 2000, and the problem only manifests in IE9, so this appears to be a new bug in the IE9 code.

    Patiently awaiting a bug fix for this issue!

    Monday, November 21, 2011 12:57 AM
  • I also experience the same bugs. 

    My scenario was doing ajax request to retrieve table, append the table into current page, and slide down to display the table.

    When dealing with many rows of data, IE randomly skip certain cells (it works fine with other browsers). 

    I can confirmed the following work around does the trick for me:

     - Eliminate any space in our html code (especially between closing column tag "</td>" and the next column tag open "<td>").

    For example the following table:

       <td></td>
       <td class="number asset-qty-pending"><%# ((Asset)Container.DataItem).QtyPending.ToString("#") %></td>
       <td></td>
    

    Removed the space and it become

    <td></td><td class="number asset-qty-pending"><%# ((Asset)Container.DataItem).QtyPending.ToString("#") %></td><td></td>
    


    Monday, December 05, 2011 11:50 PM
  • I found a workaround for this on  http://stackoverflow.com/questions/7267014/ie9-table-has-random-rows-which-are-offset-at-random-columns.

     

    Apparently it has to do with improper interpretation of spaces between tags.

     

    Execute this code on your table HTML before calling the jQuery code on it:

    var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
    [tableHtml]
    = [tableHtml].replace(expr, '><');

    • Proposed as answer by mcampo84 Friday, December 30, 2011 4:51 PM
    Friday, December 30, 2011 4:51 PM
  • 
    var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
    document.getElementById('div').innerHTML.replace(expr, '><');

    place the table in a div element and execute this jscript after partial post back. i think this is the only way to remove white space from IE9
    Wednesday, February 15, 2012 4:52 PM
  • I just wanted to add that I am also having this problem.  Removing white space between tags either manually or with regex does work but this is an unacceptable solution as far as I am concerned.  I find it extremely disappointing that I am able to find numerous posts and discussions regarding this topic dating back almost a year and as far as I can tell the issue has not even been acknowledged by Microsoft.  I have found a few links to bug reports but none of the links lead to a page that exists. 

    Wednesday, February 22, 2012 3:23 PM
  • Hi all,

    I've contacted Microsoft and had the following e-mail back:

    Hi Thomas

    I’ve had a look into this and the bug is
    being investigated. If you have a repro on XXXX I’d like to see it.

    As a thought, we might be able to
    provide some better steps to assist, rather than you have to remove all those
    whitespaces. I note XXXX have a Premier support agreement. XXXX is the
    Technical Account Manager for XXXX.

    Please feel free to contact her if you’d like to explore some additional
    guidance around this issue.

    Regards

    Mark FXXXXm

    Senior Program Manager, Internet
    Explorer Product Quality & Supportability

    So they are investigating and as I hear updates, I will provide them if necessary.

    Wednesday, February 29, 2012 2:01 PM
  • Please do, this problem seems to be plaguing my tables.

    All the links to the issues seem to be gone, and I can't find any closed, or resolved tickets on IE9.

    The hack I've noticed that works but I have no idea why is:

    <!--[if IE 9]><style type="text/css"></style><![endif]-->

    This however only works if the break happens on the initial load, it will not prevent the sorting breakage, for that you need the whitespace stripping RegEx.

    Monday, March 26, 2012 6:26 PM
  • Here's a nice example that someone wrote-up.

    http://www.ncf.ca/ncf/support/ie9_issue/index.html

    Monday, March 26, 2012 8:43 PM
  • Why has this issue been removed from connect.microsoft.com? I understand that the release of IE10 is imminent, but to ignore a significant market share is somewhat crazy.

    This is a pretty serious issue, clearly quite a few people are experiencing it. If this was Chrome, the issue would be fixed, a new release made available, everyone would be happy. I really hate to make such comparisons, I am a die hard MS dev, but this is a really good example of where Microsoft have dropped the ball.

    Does anyone have a link where I can voice my disgust directly to Microsoft about this issue?

    Wednesday, May 02, 2012 6:33 AM
  • @Dale

    https://connect.microsoft.com/IE/feedback/details/665694/ie9-skips-cells-when-rendering-large-table-with-multiple-tbody-elements-from-ajax-using-jquery

    try again.... or perhaps you do not have access

    Still ACTIVE. I know the jQuery developers have been reviewing their code also.


    Rob^_^

    Wednesday, May 02, 2012 7:09 AM
  • Hmm... I don't seem to have access. I notice the IE9 connect channel is no longer accepting bugs or suggestions. Perhaps this is why?
    Wednesday, May 02, 2012 7:12 AM
  • You may be in the Public stream, not the Developers.

    Rob^_^

    Wednesday, May 02, 2012 9:15 PM
  • Sorry, I haven't been following this thread for a long time. Microsoft has acknowledged that there is a bug in table rendering and sure are taking their time releasing a fix for it. I've just been using some workarounds for the problem because I'm not sure Microsoft is planning on fixing this bug ever (It's been over a year since I made this thread). I haven't tried IE10 for a long time but the bug was also found in IE10 preview and is possibly still there. Maybe someone else can confirm this.

    I don't really want to waste my time with a broken browser that Microsoft apparently has no intentions of properly supporting. I just use some workarounds and IE users will just have to live with the inferior experience.

    I'd really suggest you guys have a look at the ticket on connect. There is a lot more info on there.

    As I've written on the connect ticket, my sample application is currently located at http://ie9tablebug.voytsje.com/

    Friday, May 11, 2012 8:35 PM
  • I have implemented the whitespaces replacing approach, but all the Dropdownlist isnide the div or table seems to broke up. They are not expanding anymore.

    Any idea?

    Thanks to All!


    • Edited by Guille.NET Tuesday, June 19, 2012 11:12 PM
    Tuesday, June 19, 2012 7:44 PM
  • I'm also having this issue, but I'm not using jQuery to run my ajax calls.  I'm using an ASP.NET GridView to generate my table, and unfortunately this means I don't have the option of removing spaces between my <tr> tags, as some have suggested as a solution.  Please fix this, Microsoft!
    Tuesday, July 10, 2012 7:13 PM
  • I have been experiencing this problem as well, for well over a year. I also do not use JQuery. PLEASE FIX THIS, MICROSOFT!
    Wednesday, August 01, 2012 3:07 PM
  • This is still a huge problem me too. I'm not using jQuery. It's happening with a table that is rendered inside an update panel with Ajax Control Toolkit.
    Wednesday, August 22, 2012 2:29 PM
  • Does IE9 have a fix for this yet?
    Tuesday, October 23, 2012 1:32 PM
  • Brilliant; this fixed the issue for me. Thank you for citing a feasible workaround, mcampo84. (And credit to the original sources for the solution(s), David_2020 and R014ndu$; see the original thread.)

    Microsoft, it is absolutely appalling that this issue has not been fixed. You have caused innumerable developers innumerable hours of angst and frustration. If I were a paying Microsoft customer, this would be the deal-breaker for me. In itself, the issue may seem trivial and unimportant, but Microsoft's failure to address what is, in fact, a major issue for developers speaks volumes about Microsoft's attention to detail (or lack thereof).

    The real kicker is that your own customers devised a solution over 18 months ago, and yet, no public fix has been issued. Unbelievable.


    • Edited by GeraldCough Thursday, October 25, 2012 8:55 PM
    Thursday, October 25, 2012 8:54 PM
  • I too have had to deal with this issue and reformat my code to look silly just to handle IE.

    I used to be one of the few who was both a developer and fan of the IE 8 and 9 products. This issue, and some others like the printing of only one page in a multi-page document and the issue where their own graphing tools won't print the image in IE (but will in all other browsers) has now made me warn all of my users off of the product. These are big bugs coming out of Microsoft products and none of them are being addressed.

    Wednesday, November 14, 2012 2:49 PM
  • http://stackoverflow.com/questions/5805956/internet-explorer-9-not-rendering-table-cells-properly?answertab=votes#tab-top

    response_html = response_html.replace(/td>\s+<td/g,'td><td'); $('#table').html(response_html);

    it's useful for me.


    lkhzb

    Tuesday, March 05, 2013 7:31 AM