Closed Bug 313049 Opened 19 years ago Closed 14 years ago

settin innerHTML with the current innerHTML causes problems when position style is absolute or overflow is hidden

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Version:
1.0 Branch
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED INCOMPLETE

People

(Reporter: antonio, Unassigned)

Details

(Whiteboard: [CLOSEME 5-15-2010])

Attachments

(2 files)

A sample html page that describes the problem (validated on http://validator.w3.org/)
2.02 KB, text/html
Details
PHP file which sends an XHTML header + testcase
709 bytes, application/xhtml+xml
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.2) Gecko/20040803
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7

If with JavaScript you put an element innerHTML inside the same element
innerHTML (without modifying it at all!) you get problems in the layout flow.
I provide a sample page (succesfully validated on http://validator.w3.org/

Reproducible: Always

Steps to Reproduce:
please try this page, it explain everything:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gecko BUG!</title>
</head>
<body>

<table width="100%">
<tr><td>Content 1</td><td width="50%">Content 2</td></tr>
<tr><td>Content 3</td><td width="50%">

<div id="shell"
style="height:100%;width:100%;background:yellow;border:1px solid
black;position:relative;overflow:hidden;">
<div id="problematic" style="position:absolute;">
Content 4
</div>
</div>

</td></tr>
<tr><td>Content 5</td><td width="50%">Content 6</td></tr>
</table>



<div style="border-top: 3px solid rgb(192,192,192)">
<span id="begin">
As you can expect if you resize the window the columns in this table remain 50%
width both!<br>
Now <b>(1)</b> maximize the window, <b>(2)</b> <b
style="color:blue;cursor:pointer;" onclick="damnBug();">click here</b>, <b>(3)</b>
see what happens!
</span>
<span id="end" style="display:none;">
<b>Now restore the window</b>. Do you see it? What happens here is that if
you try to shrink the window the columns do not remain 50%! In fact the yellow
box does not shrink to sizes smaller
than the one it had before executing:<br>'shell.innerHTML=shell.innerHTML;'<br><br>
<b>IMPORTANT NOTE:</b> the problem <span style='color:red;'>does not happen at
all</span> if the internal &lt;div&gt;
with the id 'problematic' does not have the 'position' style set to 'absolute',
or the external one (with id 'shell')
does not have the 'overflow' set to 'hidden'.
</span>
</div>


<p><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01
Transitional" height="31" width="88"></p>

<script type="text/javascript">

function damnBug()
{
 var shell=document.getElementById("shell");

 shell.innerHTML=shell.innerHTML;   // <---- the BUG happens only here, the rest
is just for explaining

 document.getElementById("begin").style.display="none";
 document.getElementById("end").style.display="block";
};

</script>

</body>
</html>
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8b5) Gecko/20051019 Firefox/1.5
ID:2005101904

WFM. NB Despite the useragent, 1.5 is not released yet; 1.5b2 is available at
mozilla.org and 1.5 RC1 is scheduled for release 29/Oct/05.
Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.8b5) Gecko/20051019
Firefox/1.5 ID:2005101913

WFM
I think I found something.

The attached testcase (.php) does a:

header("Content-type: application/xhtml+xml");

to send the correct MIME type for this XHTML doc. The testcase breaks with the
following error:

Error: uncaught exception: [Exception... "Component returned failure code:
0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLElement.innerHTML]"	nsresult:
"0x80004005 (NS_ERROR_FAILURE)"  location: "JS frame ::
http://path/testcase.innerHTML_bug.php :: changeText :: line 9"  data: no]

However if I send the document as 'text/html' (in my case by removing
additional header) it works!

Maybe I'm overlooking something but it seems to me like the works/breaks
"switch" is the MIME type sent with the document.

Note: I've uploaded this testcase to bugilla as application/xhtml+xml.
(In reply to comment #4)

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.12) Gecko/20050915
Firefox/1.0.7

just noticed that the innerHTML + XHTML MIMEtype trouble was bug 133827, which
is marked "resolved". Well in Firefox 1.7.12 it's broken:(

sry for the spam.


This bug was reported on Firefox 2.x or older, which is no longer supported and will not be receiving any more updates. I strongly suggest that you update to Firefox 3.6.3 or later, update your plugins (flash, adobe, etc.), and retest in a new profile. If you still see the issue with the updated Firefox, please post here. Otherwise, please close as RESOLVED > WORKSFORME
http://www.mozilla.com
http://support.mozilla.com/kb/Managing+profiles
http://support.mozilla.com/kb/Safe+mode
Whiteboard: [CLOSEME 5-15-2010]
Version: unspecified → 1.0 Branch
No reply, INCOMPLETE. Please retest with Firefox 3.6.3 or later and a new profile (http://support.mozilla.com/kb/Managing+profiles). If you continue to see this issue with the newest firefox and a new profile, then please comment on this bug.
Status: UNCONFIRMED → RESOLVED
Closed: 14 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: