Dynamic content not displaying proper size and/or location in Firefox 1.5 and later.

NEW
Unassigned

Status

()

Core
Layout: Tables
12 years ago
2 years ago

People

(Reporter: B Adams, Unassigned)

Tracking

({regression, testcase})

Trunk
x86
All
regression, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9a1) Gecko/20060119 SeaMonkey/1.5a

The code, below, works on most browsers -- including Firefox 1.0x.

But for FF 1.5 (and later), Gaps appear on dynamically modified content.  
Display the test case.   Notice the Red "gap" between rows 5 and 6.

Tested on latest daily FF build and latest daily Mozilla Suite build and problem is there also.

In the testcase output, Rows 1 through 3 represent hard coded html that is the same as the dynamic html.
Note that there are no gaps between the TH rows.

The second table is the static source with one row modified by javascript. 
Note the "Gap" between Row 5 and Row 6.


Reproducible: Always

Steps to Reproduce:
1. Run the test HTML attached below.
2. This html uses javascript to insert divs around key content and also has static content that is identical to what the dynamic content will be.


Actual Results:  
The static content renders correctly (no "gap").   The dynamic content with the same structure does not render correctly.

Expected Results:  
Rendered the dynamic content the same as the static version.

TEST CASE HTML:
------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Firefox 1.5, DHTML rendering bug?</title>

    <style type="text/css">
        body
        {
            margin: 50px;
        }

        table
        {
            padding: 0;
            margin: 0;
            border-collapse: collapse;
            border: 0px solid red;
        }
        th
        {
            margin: 0;
            padding: 0;
            text-align: right;
            color: #FFFBE6;
            background-color: red;
            border-right: 1px solid #EAECEF;
        }
        td
        {
            margin: 0;
            padding: 4px;
            background-color: #D9D5C4;
            border-bottom: 2px solid #EAECEF;
        }

        .LeftSideRoundedCellFallback
        {
            background: #4C5F77;
            padding: 4px 4px 5px 9px;
            border-bottom: 1px solid #333333;
        }

        div.LeftSideRoundedCell
        {
            background: #4C5F77;
            border-bottom: 1px solid #333333;
        }
        div.LeftSideRoundedCell div
        {
        }
        div.LeftSideRoundedCell div div
        {
            padding: 4px 4px 5px 9px;
            position: relative;
            bottom: -1px;    /*-- Extra pixel for border --  But FF 1.5 screws this up! --*/
        }
    </style>

    <script language="JavaScript" type="text/javascript">
        function RoundCell (sCellID)
        {
            var zCell                       = document.getElementById (sCellID);

            /*--- Create the new wrapper divs. ---
            */
            var zMainBGImageDiv             = document.createElement ('div');
            var zTopLeftDiv                 = document.createElement ('div');
            var zBottomLeftDiv              = document.createElement ('div');

            /*--- Set the class and styles for the new wrapper divs. ---
            */
            zMainBGImageDiv.className       = 'LeftSideRoundedCell';
            zCell.className                 = zCell.className.replace ('LeftSideRoundedCellFallback', '');

            /*--- Nest the wrapper divs under the parent but around the parent's child element(s). ---
            */
            zMainBGImageDiv.appendChild     (zTopLeftDiv);
            zTopLeftDiv.appendChild         (zBottomLeftDiv);

            while (zCell.hasChildNodes () )
            {
                var zChildNode              = zCell.firstChild;
                zBottomLeftDiv.appendChild  (zChildNode);
            }

            zCell.appendChild (zMainBGImageDiv);

        } //-- RoundCell () --
    </script>
</head>
<body>
<table>
    <tr>
        <th class="">
            <div class="LeftSideRoundedCell">
                <div><div>Row 1</div></div>
            </div>
        </th>
        <td>Some Content A...</td>
    </tr>
    <tr>
        <th class="">
            <div class="LeftSideRoundedCell">
                <div><div>Row 2</div></div>
            </div>
        </th>
        <td>Some Content B...</td>
    </tr>
    <tr>
        <th class="">
            <div class="LeftSideRoundedCell">
                <div><div>Row 3</div></div>
            </div>
        </th>
        <td>Some Content C...</td>
    </tr>
</table>

<br />
<table>
    <tr>
        <th class="LeftSideRoundedCellFallback">Row 4</th>
        <td>Some Content D...</td>
    </tr>
    <tr>
        <th class="LeftSideRoundedCellFallback" id="RoundMe">Row 5</th>
        <td>Some Content E...</td>
    </tr>
    <tr>
        <th class="LeftSideRoundedCellFallback">Row 6</th>
        <td>Some Content F...</td>
    </tr>
</table>
<br />
<script language="JavaScript" type="text/javascript"> RoundCell ('RoundMe'); </script>

</body>
</html>

Comment 1

12 years ago
Created attachment 209061 [details]
reporter's testcase

Comment 2

12 years ago
confirmed with linux seamonkey trunk 2006011905
this regressed between 1.8a2 and 1.8a3

==> tables
Assignee: general → nobody
Status: UNCONFIRMED → NEW
Component: General → Layout: Tables
Ever confirmed: true
Keywords: regression, testcase
OS: Windows 2000 → All
Product: Mozilla Application Suite → Core
QA Contact: general → layout.tables
Version: unspecified → Trunk

Comment 3

12 years ago
Created attachment 209066 [details]
simpler testcase

If I switch the JS to set style.border = ''; the bug goes away.  DOM Inspector says that the cell's classname did get changed and the color goes away, but not the positioning.
(Reporter)

Comment 4

12 years ago
Created attachment 209070 [details]
Simpler testcase with attempted workaround.

(In reply to comment #3)
> ...If I switch the JS to set style.border = ''; the bug goes away. ...

This workaround does not appear to help in the original test case (or on the afflicted sites).

Also, merely adding alert()s seems to break the workaround.   See the "simpler testcase 2" attachment.

Comment 5

12 years ago
If you want a workaround, add

  document.body.offsetHeight;

after you change className.  It forces a reflow.

Comment 6

9 years ago
testcase 1 and 2 are now wfm?
You need to log in before you can comment on or make changes to this bug.