Closed Bug 72115 Opened 23 years ago Closed 23 years ago

input buttons in html 4.01 strict pages cause page reflow when pressed

Categories

(Core :: Layout: Form Controls, defect, P3)

Product:
Core
Component:
Layout: Form Controls
Platform:
x86
Linux
Type:
defect

Tracking

()

Status:
VERIFIED DUPLICATE of bug 75632
Milestone:
mozilla0.9.1

People

(Reporter: djoham, Assigned: rods)

References

(
URL
)

Details

Attachments

(1 file)

test case
670 bytes, text/html
Details 
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (X11; U; Linux 2.2.17-21mdk i686; en-US; 0.8.1)
Gecko/20010314
BuildID:    2001031408

I can't believe this isn't a dupe, but I searched and couldn't find anything on
buttons and reflow in bugzilla. Here goes..

If you have any kind of button (input or button) in a strict HTML or loose html
4.01 page, pressing that button will cause a page reflow down a couple of
pixels. When you let go of the button, the page reflows back up

Reproducible: Always
Steps to Reproduce:
1. open the test case I'll submit and press the button
2.
3.

Actual Results:  Everything from the line the button is on and down moves up and
down a few pixels when the button is pressed and released.

Expected Results:  Only the button should be affected

This problem does not occur in quirks mode
Attached file test case — 

    
    

    
  
This is a core layout issue, I can't see how a button make or break the 
reflowing of items after it. You can also now see this with the reflow counts 
displayed.

reassigning 
Assignee: rods → attinasi
Status: UNCONFIRMED → NEW
Ever confirmed: true

    
    

    
  
I cannot duplicate this using the attached testcase (my build is two days old
though).

Rod, did you verify the problem before you sent it to me? I'm pulling a brand
new tree now and will retest when built.

    
    

    
  
OK, I see this now. It looks like the button is getting larger when clicked (due
to the border) and is changing the line height. I'll try to find out whay this
is only happening in standard mode...
Status: NEW → ASSIGNED

    
    

    
  
Assigning priority and milestone.
Priority: -- → P3
Target Milestone: --- → mozilla0.9.1

    
    

    
  
There is some style rule that is chaning the padding on the button when it is
active (in std. mode). Here is a testcase that ensures that the padding is the
same so there is no change in the button size, hence no reflow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<STYLE>
input { padding:1px !important; border: 1px solid red !important; }
input:active { padding:1px !important; border: 1px solid blue !important; }
</STYLE>
</head>
<body>

<p>This is a paragraph before the button</p>
<p>This is text before the button
<input type="button" name="foo2" id="foo2" value="click me and watch the page
reflow">
This is text after the button
</p>

<p>This is a paragraph after the button</p>

</body>
</html>

If you remove the padding rules you will see how the button padding increases
when you activate it.

    
    

    
  
forms.css: padding is changed for the active button.

button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  color: ButtonText;
  padding: 0px 1px 0px 1px;	!!!!! PADDING IS SET HERE FOR NON-ACTIVE
  font: button;
  cursor: default;
  white-space: pre;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-user-focus: normal;
  -moz-binding: none;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  border-style: inset;
  padding: 2px 0 0 2px;	!!!!! PADDING IS CHANGED HERE FOR ACTIVE
}

If the padding size is changed, the button size is changed. If I remove the
padding rule from the :active case, the button does not resize.

Reassigning to Rod S. sice I'm not sure why the padding was set like this in the
first place...
Assignee: attinasi → rods
Status: ASSIGNED → NEW

    
    

    
  
The padding was being changed to move the label down and to the right to make
the button appear "pressed in" when active. Ultimately, our CSS support needs to
be smart enough to realize that the overall size of the button has not changed
in this case and not cause a reflow. (I discussed this at length with troy and
others a long time ago.) Until then, we would just change the button rule. 

    
    

    
  
This is a real annoying problem.

I am adding a url for a web site that I work on that you really notice the
redraws.  Try clicking on the "clear" button.
URL: http://www.mutualfundsnet.com

    
    

    
  
Changing the padding *does* change the size of the button. However, maybe the
problem is related to the box-sizing regression?

    
    

    
  
cc self.  sorry for the SPAM.

    
    

    
  
Would not it be sufficient to change the 0px borders to 1px in the non-pressed
case, so the total size of the button remains constant? :o

    
    

    
  
*** Bug 75062 has been marked as a duplicate of this bug. ***

    
    

    
  
*** Bug 75413 has been marked as a duplicate of this bug. ***

    
    

    
  
Is this somehow related to Bug 55086?  It looks oddly similar even though the
reflow causes are different.  Possibly a dupe?

    
    

    
  
Christopher, I think this bug is much simpler than bug 55806. The style rules
for the non-active vs. active are merely changing the size of the button here.

    
    

    
  
accepting
Status: NEW → ASSIGNED

    
    

    
  
the patch to bug 75632 fixes this.

*** This bug has been marked as a duplicate of 75632 ***
Status: ASSIGNED → RESOLVED
Closed: 23 years ago
Resolution: --- → DUPLICATE

    
    

    
  
Verifying
Status: RESOLVED → VERIFIED

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: