784665 - scrollWidth does not reflect width of nested table

Status: RESOLVED INCOMPLETE

(Core :: DOM: CSS Object Model, defect)

Description

[Stefan Blanke]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.1 (KHTML, like Gecko) Chrome/21.0.1180.83 Safari/537.1

Steps to reproduce:

see video:
http://www.youtube.com/watch?v=eYimu_mQwVg
2 pass renderer sets scrollbars by calculation depending on correct scrollWidth property.  



Actual results:

Values returned in first pass, don't reflect actual sizes. Layout breaks.


Expected results:

Everything should fit neatly and all scrollbars should be visible. Content is pushed out of viewing area, because of late activation of scrollbar at snd pass...

Comment 1

[Loic]

Could you attach a minimal testcase (as plain html if possible) to your bug report, please. So devs will be able to test.

Comment 2

[Boris Zbarsky [:bzbarsky]]

Yeah, it's hard to do anything with the video without seeing the source of the page and the script that's running....

Comment 3

[Stefan Blanke]

URL:
http://www.webmop.de/app/context.html

Fix Script:
this.fixTableScrollWidth=function(n)
{
 var fc=n.firstChild,cs=app.getCS(fc)
 if(n.childNodes.length==1 && cs.display=="table")
 {
  return app.getElementOuterWidth(fc)-((app.getCS(n).direction=="ltr")?parseFloat(cs.marginRight)||0:parseFloat(cs.marginLeft)||0)
 }
 else return n.scrollWidth
}

app.getCS() is getComputedStyle()
app.getElementOuterWidth() gets full element width

Fragment of usage:

if(p.offsetWidth && p.offsetWidth<((app.usePrecisionScrollWidthFix)?app.fixPrecisionScrollWidth(p):(app.useTableScrollWidthFix)?app.fixTableScrollWidth(p):p.scrollWidth))
{
 if(prd.scrollX!="scroll")
 $this$.setDirtyScroll(p)
 prd.scrollX=p.style.overflowX="scroll"
}
...

it's just a simple check and some optimization stuff...

CSS for table in question:

.app-tabheadstoptable
{
	border:0px;
	border-bottom:2px solid #cccccc;
	margin:0px;
	padding:0px;
	border-collapse:collapse;
	border-spacing:0px;
	width:100%;
	background-color:transparent;
}

Comment 4

[Boris Zbarsky [:bzbarsky]]

> app.getElementOuterWidth() gets full element width

How does it do that?

Comment 5

[Stefan Blanke]

Video of bug step by step. First fixed run, second bug run...
http://www.youtube.com/watch?v=X6aMdPripw8

Comment 6

[Stefan Blanke]

(In reply to Boris Zbarsky (:bz) from comment #4)
> > app.getElementOuterWidth() gets full element width
> 
> How does it do that?

this.getElementOuterWidth=function(e)
{
 return e.offsetWidth+$this$.getFullMarginWidth(e).width
}

this.getFullMarginWidth=function(e,cs)
{
 var ml,mr
 cs=cs||app.getCS(e)
 if((cs.display=="table-cell" || cs.display=="table-column") && cs.borderCollapse=="separate" && cs.borderSpacing)
 {
  var bsh=parseFloat(cs.borderSpacing)||0;
  if(e.parentNode.firstChild===e)ml=bsh
  else ml=Math.ceil(bsh/2)
  if(e.parentNode.lastChild===e)mr=bsh
  else mr=Math.floor(bsh/2)
 }
 else
 {
  ml=parseFloat(cs.marginLeft)||0;
  mr=parseFloat(cs.marginRight)||0;
 }
 return {left:ml,right:mr,width:mr+ml}
}

Comment 7

[Stefan Blanke]

I made a change to my rendering hierarchy which fixes the problem in a clean way. With the next upload, all above links will not show this "bug" anymore. Due to the fact, that it's a rare situation and does not occur when taken into account and most important: it can be fixed in several (clean) ways, i think, its best to close this bug. I don't think its wise to change the way tables are rendered in firefox (and opera) or poke in some strange fix which may break optimizations. There are a lot of more important things to do, i guess..

Comment 8

[Boris Zbarsky [:bzbarsky]]

Yeah, I can't figure out based on that code snippet what's going wrong, and the full site is not showing the problem any more...

Resolving incomplete for now.