This project is archived and is in readonly mode.

#194 ✓resolved
Ricardo Graça

Fx.Slide sometimes clips the contents of divs

Reported by Ricardo Graça | November 25th, 2009 @ 08:36 PM | in 1.3.1.1

Sometimes the contents of a sliding DIV become clipped at the bottom. This happens when there is an element inside the DIV, located at the top, that has a value for margin-top, like a header, and there is an element above the DIV that has a value for margin-bottom. On the original DIV the margin-top element's (let's call it a header) top margin is ignored and on the wrapper this margin is not ignored resulting in clipping at the bottom by a value equal to the header margin-top.

Comments and changes to this ticket

  • guitarsecretary

    guitarsecretary December 10th, 2009 @ 01:00 AM

    I also experienced this on Chrome, FireFox and IE8 on Windows 7. I came up with a temporary hack which was to apply a style of "padding:1px 0px" to the containing div, so that the margin is forced back down inside it.

    A simple example:

    <script type="text/javascript">
    //<![CDATA[
    var slider;
    window.addEvent('domready', function() {
        slider = new Fx.Slide($('test'));
    });
    //]]>
    </script>
    <div id="test">
        <p>A paragraph</p>
        <a href="#">a link</a>
        <hr />
    </div>
    <a href="#" onclick="slider.toggle();">Toggle</a>
    
  • guitarsecretary

    guitarsecretary December 10th, 2009 @ 01:02 AM

    Sorry I didn't format the example properly. Here it is:

    <script type="text/javascript">
    //<![CDATA[
    var slider;
    window.addEvent('domready', function() {
        slider = new Fx.Slide($('test'));
    });
    //]]>
    </script>
    <div id="test">
        <p>A paragraph</p>
        <a href="#">a link</a>
        <hr />
    </div>
    <a href="#" onclick="slider.toggle();">Toggle</a>
    
  • Aaron Newton

    Aaron Newton January 14th, 2010 @ 06:35 PM

    • Milestone set to 1.2.5.2
    • State changed from “new” to “hold”
    • Assigned user set to “Aaron Newton”

    can someone make a mooshell that demonstrates this problem in action?

  • Aaron Newton

    Aaron Newton January 14th, 2010 @ 06:36 PM

    • State changed from “hold” to “open”
  • Ricardo Graça

    Ricardo Graça January 16th, 2010 @ 10:20 PM

    What's a mooshell?
    I have new info and an example of the problem. It seems to happen only when the div to slide is updated with an AJAX request and then slided. This could mean that the problem also occurs if an element with margin-top is inserted at the top of the DIV using methods other than request. I didn't test this though.

    In this example, the DIV to slide is first empty. When the user clicks "toggle" for the first time a request is made and content appears fine. Subsequent clicks on "toggle" will slide the DIV and also clip the contents at the bottom:

    http://www.cbastosconsultores.com/moo/

  • Ricardo Graça

    Ricardo Graça February 18th, 2010 @ 10:36 PM

    I have more info on this matter.
    Whatever the problem is it also affects Fx.Reveal, although it only manifests itself as a sort of vertical nudge on the animated DIV during the animation phase. When the animation stops the DIV returns to the correct position and the content is not clipped. So far I'm using a workaround that includes adding a CSS class with no margin-top to the first element in case it has a margin-top value other than 0.

  • Aaron Newton

    Aaron Newton February 19th, 2010 @ 05:54 PM

    http://mooshell.net (sorry, at this point, I just assume everyone's seen it as we use it so much).

    As for your issues, I'm not sure if this is really a bug or not. I mean, yes, it shouldn't do this, but I'm not sure that there's a clear way to prevent it. Regardless, if you'll create a demo on mooshell (which lets us edit and tweak it to solve the problem - unlike a link to your site) it'll help a lot.

  • Ricardo Graça

    Ricardo Graça February 19th, 2010 @ 11:12 PM

    Somehow with the 1.2.4.4 update this problem is partially fixed. Slide now works almost as expected except during the descending phase of the vertical animation (horizontal slide works fine). Example here.

    Reveal still has a hickup on the animation if there is an element with margin-top returned by the request and there is a block element with margin-bottom before the animated div (yes, if it is an inline element everything works fine). To demonstrate this I've wrapped the anchor inside a div with "margin: 20px 0". Remove the wrapper and everything works fine. Example here.

    Of course workarounds are possible, but it would be best if Fx.Reveal and Fx.Slide worked perfectly "out of the box" on every possible scenario.

  • csuwldcat

    csuwldcat April 23rd, 2010 @ 01:17 AM

    Most likely this is the failure to account for the border or another css style, I have seen it before and I think this ticket is a duplicate of that issue.

  • csuwldcat
  • Ricardo Graça

    Ricardo Graça April 23rd, 2010 @ 01:13 PM

    Well, I suspect that it isn't a duplicate since Slide and Reveal work just fine when the contents are already there when the FX is created. The problem is when you change the contents of the animated block element (div) and there is a new top element that has margin-top. And as if that wasn't enough when you do add a border to the animated block element the problem goes away and everything works fine, so I would say this bug is the exact oposite of that one, since adding a border actually solves the problem.

  • JacobThornton

    JacobThornton September 29th, 2010 @ 03:43 AM

    • Milestone order changed from “0” to “0”

    Here's a js fiddle showing the reported issue: http://jsfiddle.net/KGA5M/1/

    The problem is when getting innerHeight on element "foo", where the first sibling of "foo" has a margin-top and "foo" has neither a border nor padding -- "foo".innerHeight (tested in webkit/gecko) disregards the margin and returns an incorrect height, causing slide to look jank while opening.

    I looked around but couldn't find anything really on this issue and the only solution (besides adding a border or padding to the sliding element) that I could think of would be to fetch all children of "foo" and compute clientHeight of each and manually add in margin-top/bottom -- although I think this would probably be pretty slow.

    there's probably a better solution, I'm just not seeing it now.

  • Ricardo Graça

    Ricardo Graça October 5th, 2010 @ 07:07 PM

    @JacobThornton This is only a problem IF the first sibling has margin-top, so why not just check for this and account for it if present? No need to check every children of the parent element. Here's a fiddle of your fiddle showing this:

    http://jsfiddle.net/KGA5M/3/

  • Tim Wienk

    Tim Wienk November 4th, 2010 @ 11:54 PM

    • Milestone changed from 1.2.5.2 to 1.3.1.1
    • Tag changed from clipping, fx.slide to clipping, fx.slide, height
  • JacobThornton

    JacobThornton November 25th, 2010 @ 10:36 PM

    • Milestone order changed from “1” to “0”

    Here's one gross fix if this is still annoying you: http://jsfiddle.net/jacob/KGA5M/20/

  • JacobThornton
  • JacobThornton

    JacobThornton November 26th, 2010 @ 07:12 PM

    • State changed from “open” to “resolved”

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

Pages