Lines vanish when dragging a box




12 years ago
12 years ago


(Reporter: LeRoy Krueger, Unassigned)


1.8 Branch
Windows XP

Firefox Tracking Flags

(Not tracked)



(2 attachments)



12 years ago
Problem with the sides of a box vanishing when the box is dragged with the mouse. All four sides of the box should remain visible during the drag.

Comment 1

12 years ago
Created attachment 201746 [details]
Simple extension to demonstrate the problem

Install the .xpi
Run the extension by selecting "Now you see 'em..." from the tools menu.
Drag a selection box in the extension window. All four sides of the box should remain visible during the drag. There may be some light flicker but you should not be able to stop moving with any side of the box hidden.

The extension uses a stack, with the selection box in a layer above the window display area.

The extension uses style to change the position of the selection box (chartTape).

  var chartTape = document.getElementById("chartTape");
  if (chartTape) { = left + "px"; = width + "px"; = top + "px"; = height + "px";

Comment 2

12 years ago
Problem does not appear when the box origin changes, just when the origin remains constant and the height or width change
Martijn, do you think you can reduce that (especially to just being a XUL file)?
Created attachment 201853 [details]
testcase, based on extension

It seems like a rounding issue to me.
Yeah, that's what I thought too...

Comment 6

12 years ago
Additional observation about this bug. The lines vanish depending on the queadrant of the mouse relative to the initial mouse position. If the mouse is in the upper-left qaudrant, the lines never vanish. If the mouse is in the upper-right quadrant, only the right line might vanish. If the mouse is in the lower-left quadrant, only the lower line might vanish. If the mouse is in the lower-right quadrant, either the right or lower lime might vanish, at times both the right and lower lines might vanish.

Comment 7

12 years ago
Here is an almost work-around for this bug. Vary the upper left corner of the box each time it is drawn. Yes the box will not be in the correct place half of the time, but it will always be drawn.

Add var wobble to the global context with an initial value of 0;

var wobble = 0;

now add in the wobble to the left or top coordinate when it remains the same.

  if (thisY >= firstY) {
    top = firstY + (wobble++ & 1);
    height = thisY - firstY;
  } else {
    top = thisY;
    height = firstY - top;

In this case, the top line of the selection box wobbles up and down a single pixel, but the entire box is always drawn when the mouse is in any quadrant. Not a true work around, but may help in some cases.
I think a better workaround would be putting something like this in your css for .chartTape :
border:2px solid red;
-moz-border-right-colors: transparent red;
-moz-border-left-colors: transparent red;
-moz-border-top-colors: transparent red;
-moz-border-bottom-colors: transparent red;
It seems to work just fine here. Off course you can choose the colors yourself.
(There doesn't seem to be a -moz-border-colors property, which I find really odd)
You need to log in before you can comment on or make changes to this bug.