Uploaded image for project: 'Confluence Server and Data Center'
  1. Confluence Server and Data Center
  2. CONFSERVER-66172

Fixed width tables aren't rendered correctly in Confluence pages when using Chrome 91

    XMLWordPrintable

Details

    Description

      Issue Summary

      Tables with fixed-width stopped rendering correctly after upgrading Chrome to version 91. It seems to be an update in the table rendering feature, according to the Chrome Release Notes.

      Steps to Reproduce

      1. Install Chrome 91.0.4472.77?
      2. Access Confluence and create a page with the following storage format:
        <p class="auto-cursor-target"><br /></p><ac:structured-macro ac:name="section" ac:schema-version="1" ac:macro-id="2c29cccd-0fa7-406b-b443-30ac6a759834"><ac:rich-text-body>
        <p class="auto-cursor-target"><br /></p><ac:structured-macro ac:name="panel" ac:schema-version="1" ac:macro-id="b6d45086-f4d6-47be-9fed-ac1bb5473d6e"><ac:parameter ac:name="borderColor">#000099</ac:parameter><ac:parameter ac:name="borderWidth">4</ac:parameter><ac:rich-text-body>
        <h1 style="text-align: center;"><strong>Example</strong></h1>
        <div align="center">
        <p class="auto-cursor-target"><br /></p>
        <table class="wrapped fixed-table"><colgroup> <col style="width: 170.0px;" /> <col style="width: 170.0px;" /> <col style="width: 151.0px;" /> <col style="width: 152.0px;" /> </colgroup>
        <tbody>
        <tr>
        <td style="width: 56.1924%;" colspan="4">
        <div class="content-wrapper" style="text-align: center;">
        <p></p>
        <p><strong> Example Text 1 </strong></p></div></td></tr>
        <tr>
        <td style="text-align: center;width: 7.04875%;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 2 </strong></p></div></td>
        <td style="text-align: center;width: 10.2108%;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 3 </strong></p></div></td>
        <td style="text-align: center;width: 8.43215%;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 4 </strong></p></div></td>
        <td style="text-align: center;width: 6.917%;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 5 </strong></p></div></td></tr>
        <tr>
        <td style="text-align: center;width: 7.04875%;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 6 </strong></p></div></td>
        <td style="width: 10.2108%;text-align: center;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 7 </strong></p></div></td>
        <td style="width: 8.43215%;text-align: center;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 8 </strong></p></div></td>
        <td style="width: 6.917%;text-align: center;">
        <div class="content-wrapper">
        <p></p>
        <p><strong> Example Text 9 </strong></p></div></td></tr></tbody></table>
        <p class="auto-cursor-target"><br /></p></div></ac:rich-text-body></ac:structured-macro>
        <p class="auto-cursor-target"><br /></p></ac:rich-text-body></ac:structured-macro>
        
      3. Save the Page

      Expected Results

      The page should be rendered as:

      Actual Results

      The page renders as:

      This was a change introduced in Chrome 91:

      Chrome uses updated table rendering

      Chrome 91 updates the way it renders tables on web pages. This change fixes known issues and brings Chrome closer to the behavior of other browsers, so we expect the impact to be minimal. However, you should test important workflows in your environment for unexpected issues. A full explainer is available here.

      Workaround

      1. Open Chrome
      2. Access the address chrome://flags
      3. Search for the flag Enable TableNG
      4. Disable it and re-launch Chrome

      Workaround 2

      1. Edit the page
      2. Copy the table that isn't rendering correctly (it doesn't appear in the editor, but you can hove the mouse cursor over it)
      3. Paste the table into any other place in the page. It should be rendered correctly.

      Attachments

        1. chrome_debug.log
          298 kB
        2. confluence-stage.mathworks.com.har
          12.46 MB
        3. htmlDump.zip
          2.24 MB
        4. image-2021-06-08-18-13-58-848.png
          image-2021-06-08-18-13-58-848.png
          33 kB
        5. image-2021-06-08-18-14-19-898.png
          image-2021-06-08-18-14-19-898.png
          36 kB
        6. storage_format.txt
          15 kB

        Issue Links

          Activity

            People

              nhoxuan Nam Ho
              lfaganello@atlassian.com Leonardo Faganello (Inactive)
              Votes:
              14 Vote for this issue
              Watchers:
              20 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: