0

I'm encountering a strange bug in chrome (also happen in chromium) but not under firefox. I'm coding something to be able to resize some divs.

Sometimes in chrome a sibling div is displaying as 0px height when I'm resizing. For example, in this fiddle, if you drag the resizing line between the red and the blue div, the green div disappear.

I put a breakpoint on the code of the mousemove handler in order to inspect the div, but the css is exactly the same as the div displaying correctly.

To try it put a breakpoint here :

$("*").mouseup(function(event) {
    if (downV) {
        downV = false;

Is this a webkit related bug or am I doing something wrong? How can I fix this?

Richard
  • 992
  • 1
  • 11
  • 27
  • Why bring the height to 0px? I don't see any animations, although I skimmed through it, why not just use .hide() and hide the div instead of making it 0px in height. Also your fiddle's js is invalid because you made a function in a loop, so it won't run (hit the JSHint button at top, it will show you where the errors are in your code (`parent.prevAll().each(function () { upperSize += $(this).height(); });`) and the one with width – ctwheels Aug 11 '14 at 13:34
  • The code is working even tough jsfiddle point out a problem. The button go to 0px was for another chrome related bug but which come from webkit (https://code.google.com/p/chromium/issues/detail?id=68004) I've edited to remove it – Richard Aug 11 '14 at 14:26
  • Now I understand the issue, that's a weird issue. If you take a look at this: http://stackoverflow.com/questions/17855401/how-do-i-make-a-div-width-draggable it may help you, it seems the same thing had been occurring to the person who answered. He fixed it. It seems your green box is remaining there, it is your blue and red box that are jumping to the left side of the container. – ctwheels Aug 11 '14 at 14:42
  • Can clearly see with the inspector that the green box take a height of 0px tough the css didn't changed :/ Plus it's not always doing this, if you are moving the yellow handle to the top, or to the bot, it might "solve" the issue. – Richard Aug 11 '14 at 14:46

1 Answers1

2

The problem seems to be, that it – for whatever reason – doesn't like the mixed units (percent and pixel values) while moving. Check out this fiddle, I've changed the code in $(".area").mousemove(function(event) to use percent values and commented out the conversion px => % in the $("*").mouseup(function(event) method and it seems to works correctly:

mouseup:

$("*").mouseup(function(event) {
    if (downV) {
        downV = false;
        $("body").css("cursor","initial");
        //upchild.css("height", upchild.height()*100/sizeTot+"%");
        //downchild.css("height", downchild.height()*100/sizeTot+"%");
        event.stopPropagation();
    } else if (downH) {
        downH = false;
        $("body").css("cursor","initial");
        upchild.css("width", upchild.width()*100/sizeTot+"%");
        downchild.css("width", downchild.width()*100/sizeTot+"%");
        event.stopPropagation();
    }
});

mousemove:

$(".area").mousemove(function(event) {
    if (downV){
        var y = event.pageY - $(this).offset().top - upperSize;
        if (y < 0) {
            y = 0;
        }
        if (y > sizePart) {
            y = sizePart;
        }
        upchild.css("height", (Math.floor(y)+1)*100/sizeTot+"%");
        downchild.css("height", Math.floor(sizePart-y)*100/sizeTot+"%");
        event.preventDefault();
    } else if (downH) {
        var x = event.pageX - $(this).offset().left - upperSize;
        if (x < 0) {
            x = 0;
        }
        if (x > sizePart) {
            x = sizePart;
        }
        upchild.css("width", Math.floor(x)+1);
        downchild.css("width", Math.floor(sizePart-x));
        event.preventDefault();
    }
});
S22h
  • 553
  • 4
  • 16