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

RESOLVED INCOMPLETE

Status

()

Core
General
RESOLVED INCOMPLETE
10 years ago
a year ago

People

(Reporter: Derek Conklin, Unassigned)

Tracking

({regression})

Trunk
x86
Windows XP
regression
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [needs a testcase], URL)

(Reporter)

Description

10 years ago
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;
	}
}
(Reporter)

Updated

10 years ago
Flags: blocking-firefox3?
Keywords: css2, dom2, xhtml
Version: unspecified → 3.0 Branch

Updated

10 years ago
Component: General → General
Flags: blocking-firefox3?
Product: Firefox → Core
QA Contact: general → general
Version: 3.0 Branch → Trunk
This seems to be a dupe of Bug 438921.
(Reporter)

Comment 2

10 years ago
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.
Keywords: regression
(Reporter)

Comment 3

10 years ago
This bug is still unpatched.
(Reporter)

Comment 4

10 years ago
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?

Updated

10 years ago
Depends on: 438921
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?

Updated

8 years ago
Keywords: css2, dom2, xhtml
Whiteboard: [needs a testcase]

Comment 6

5 years ago
(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?
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Flags: needinfo?(derekconklin)
Keywords: testcase-wanted
Resolution: --- → INCOMPLETE
Keywords: testcase-wanted

Updated

a year ago
Flags: needinfo?(derekconklin)
You need to log in before you can comment on or make changes to this bug.