If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

scrollWidth does not reflect width of nested table

RESOLVED INCOMPLETE

Status

()

Core
DOM: CSS Object Model
RESOLVED INCOMPLETE
5 years ago
5 years ago

People

(Reporter: Stefan Blanke, Unassigned)

Tracking

14 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
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

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

Updated

5 years ago
Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core
Yeah, it's hard to do anything with the video without seeing the source of the page and the script that's running....
(Reporter)

Comment 3

5 years ago
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;
}
> app.getElementOuterWidth() gets full element width

How does it do that?
(Reporter)

Comment 5

5 years ago
Video of bug step by step. First fixed run, second bug run...
http://www.youtube.com/watch?v=X6aMdPripw8
(Reporter)

Comment 6

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

Comment 7

5 years ago
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..
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → INCOMPLETE
You need to log in before you can comment on or make changes to this bug.