439149 - Style does not apply to JavaScript-inserted objects on a .xhtml.gz document.

Status: RESOLVED INCOMPLETE

(Core :: General, defect)

Description

[Derek Conklin]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/2.0.0.14;MEGAUPLOAD 1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox/2.0.0.14;MEGAUPLOAD 1.0

CSS apparently does not apply to objects inserted via JavaScript on a gzipped document with the extension ".xhtml.gz".  The objects are inserted properly, but according to Firebug, have 0 width and 0 height.  The width and height also cannot be modified with JS.

However, on a ".html.gz" document with the mime type "application/xml+xhtml", the objects do work.  This only happens in Firefox3, and not in Firefox2.  No errors were reported in Error Console or Firebug.  Page validates correctly as XHTML 1.1.

Reproducible: Always

Steps to Reproduce:
1. Visit http://www.dubhappy.com/code-geass-episode-7-english-dubbed/ on Firefox 3
2. Observe, video should display after 1 second.  Chat should display after 5.

Actual Results:  
The objects behave as if they have 0 dimension.  The HTML is still inserted, as can be seen by the "Video Size" or "Expand Chat" links.  Firebug shows that the links do work and alter the style.

There should be a video object displaying on the left, and a chat client on the right

Expected Results:  
The video and chat objects should display.  The video after 1 second, the chat after 5 seconds.

The CSS:
object#video{ // Also tried as simply "#video"
	width: 636px;
	height: 504px;
	display: block;
}

The Object:
<object id="video" type="application/x-shockwave-flash" data="http://www.viddler.com/player/44e1237c/"><param name="movie" value="http://www.viddler.com/player/44e1237c/"/><param name="quality" value="high"/><param name="scale" value="noorder"/><param name="wmode" value="transparent"/><param name="allowscriptaccess" value="never"/><param name="allownetworking" value="internal"/><param name="allowfullscreen" value="true"/><param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer"/></object> 

The JS:
function setVideo(src){
	if ( document.getElementById('holder') !== null ){
		var input = '<object id="video" type="application/x-shockwave-flash" data="';
		input = input + src;
		input = input + '"><param name="movie" value="';
		input = input + src;
		input = input + '" /><param name="quality" value="high" /><param name="scale" value="noorder" /><param name="wmode" value="transparent" /><param name="allowscriptaccess" value="never" /><param name="allownetworking" value="internal" /><param name="allowfullscreen" value="true" /><param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" /></object>';
		input = input + '<div id="after"><div id="size" class="videoControl" >Size: <a href="javascript:adjustDimension(1)">[-]</a> <a href="javascript:adjustDimension(3)">[+]</a></div>';
		if ( src.search(/veohplayer/) > 0 ){
			input = input + '<div id="legacy" class="videoControl" style="padding-left: 100px;"><a href="javascript:legacyPlayer(true)">Switch to Old Player</a></div>';
		} else if ( src.search(/videodetails2/) > 0 ){
			input = input + '<div id="legacy" class="videoControl" style="padding-left: 100px;"><a href="javascript:legacyPlayer(false)">Switch to New Player</a></div>';
		}
		input = input + '<div id="stumble" class="videoControl" style="padding-left: 100px;"><a href="http://www.stumbleupon.com/submit?url=';
		input = input + document.URL+'&title='+document.title.replace(/ /g,'+');
		input = input + '"><img style="width: 15px; height: 15px;" src="http://www.img1.dubhappy.com/stumble.png" alt="" />I Like This!</a></div>';
		input = input + '</div>';
		input = input.replace(/&amp;/g, '&');
		input = input.replace(/&/g, '&amp;');
		document.getElementById('holder').innerHTML = input;
	}
}

Comment 1

[Ria Klaassen (not reading all bugmail)]

This seems to be a dupe of Bug 438921.

Comment 2

[Derek Conklin]

That bug does appear to be for the same problem.

The JavaScript does work. The HTML is inserted, and Google Analytics for example is working.

The problem appears to be the css is not applying to the object.  Firebug reports the 'width', 'height', and 'display' all null in the DOM.

Comment 3

[Derek Conklin]

This bug is still unpatched.

Comment 4

[Derek Conklin]

I've had to downgrade my site due to this, that's 3 million pageviews a month that could all be 300% faster.  Updating the site is now also a 3 hour operation instead of 20 minutes...

Does anyone have an update on the issue?

Comment 5

[:Ms2ger (he/him; ⌚ UTC+1/+2)]

Derek: <http://www.dubhappy.com/c23/code/geass-episode-7-english-dubbed.xhtml.gz> is no longer available. Do you have a page available where the problem can be seen?

Comment 6

[Wayne Mery (:wsmwk)]

(In reply to :Ms2ger from comment #5)
> Derek:
> <http://www.dubhappy.com/c23/code/geass-episode-7-english-dubbed.xhtml.gz>
> is no longer available. Do you have a page available where the problem can
> be seen?