Bug Tracker

Opened 9 years ago

Closed 7 years ago

#8515 closed bug (invalid)

Animate hiding contained borders

Reported by: leo@… Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.5.1
Keywords: Cc:
Blocked by: Blocking:

Description

Click on "go" on... http://jsfiddle.net/kG3dD/

Repro'd on jquery v1.5.1 and 1.4.2.

Two nested divs of the same size, with inner set to 100%. Inner div is yellow with a blue border. Animating the size of the outer div clips the bottom and right blue border during animation, and then restores them when done.

I'd expect the blue border to remain in tact during the animation. Maybe this is deliberate for some other reason, but the behavior certainly seems buggy.

Change History (5)

comment:1 Changed 9 years ago by Rick Waldron

Component: unfiledeffects
Owner: set to gnarf
Priority: undecidedlow
Status: newassigned

comment:2 Changed 9 years ago by gnarf

This bug doesn't surprise me much, http://jsfiddle.net/gnarf/kG3dD/1/

If you take a look at that fiddle, you'll see that the outer container is applied an overflow: hidden ... This causes the inside box to fall outside because width: 100% doesn't take into account the borders on the element.

See also http://jsfiddle.net/gnarf/kG3dD/3/ for a "working" version of your fiddle...

Last edited 9 years ago by gnarf (previous) (diff)

comment:3 Changed 9 years ago by leo@…

In the simplified example, it's easy to do the math yourself on the boxes and make them fit. In the real world where this came from that doesn't work.

Adding .css('overflow', 'visible') after the .animate() call is a fairly good workaround, i.e. http://jsfiddle.net/q3j3R/

comment:4 Changed 8 years ago by gnarf

Owner: gnarf deleted
Status: assignedopen

You could also just use box-sizing: border-box where supported... https://developer.mozilla.org/en/CSS/box-sizing

comment:5 Changed 7 years ago by dmethvin

Resolution: invalid
Status: openclosed

We can't do anything about this, it's the default CSS box model. As gnarf says, you could use box-sizing: border-box when possible.

Note: See TracTickets for help on using tickets.