width 100% not working correctly

[seltix5]

hi,
first of all, great work! beautifull plugin :D

now the problem, you can reproduce the problem with the demo "loading-animation" adding about 80 or more "mix" elements to the container (i test this in chrome and firefox).
The problem is : while the loading animation is runing the "mix" elements wont use 100% of the width, only after the loading animation finish they all update to the correct width.
Thank.

[patrickkunka]

HI @seltix5,

Could you attach a screenshot or gif of the issue?

[seltix5]

hi,
check this example : https://rawgit.com/seltix5/mixitup/v3/demos/loading-animation/index.html
(at the right)

[patrickkunka]

Unfortunately I couldn't recreate it. I tried at a few different screen sizes (on Mac chrome) and it all seemed fine.

Could you tell me a bit more about your environment, and also post a screenshot/gif if possible.

[seltix5]

hi,
i'm using Win 7 and chrome 58.0.3029.110 (64-bit) / firefox 53.0.2 (32-bit)
here it is this video with the prblem example in chrome :
http://screencast-o-matic.com/watch/cbhXQ0XuCu
it take some seconds to update because the demo has around 100 "mix" elements.

[patrickkunka]

Thanks that's very helpful.

The issue appears to be caused by invisible scrollbars being added and removed as the container height grows. In mac, scrollbars don't take up physical space in the viewport, but in Windows they do which is why I didn't see it.

This is more to do with styling and how the browser calculates element sizes during transitions than anything to do with MixItUp. I've had a play around but I haven't found a good solution yet, other than to suggest applying overflow: hidden to the container or body while the loading animation is in progress, and then removing it. This would still result in a visible jump when the scrollbars are added, but at least it would make sense to the user.

You may also want to experiment with other types of styling for the grid (flex-box, floats), or other transform effects to see if that has any effect.

I'll leave this open and hopefully I can come up with some workaround in the near future. If you do come across a better solution in the meantime, please do let me know.

Thanks

[patrickkunka]

Quick update:

I've just had some luck by applying a minimum height to the container, for example I applied min-height: 100vh; to .container in the css and that seemed to prevent the jump. I think the trick is to ensure that the container is never smaller than the viewport.

Let me know if that helps!

[seltix5]

hi,
youre right, the problem has to do with the scrollbar. before starting the loading animation the script gets the screen width, because the elements are not there yet the width does not subtract the scrollbar width.
As you said, the min-height solve the problem because it forces the scrollbar, but it is not a solution for my case because the height is dependent on the content and it can change.
This same problem is also visible when resizing the window during the animation.
I updated this demo with slower animation to test this.
At the moment i dont see a solution either :S
https://rawgit.com/seltix5/mixitup/v3/demos/loading-animation/index.html

[seltix5]

cant you add a resize event to update the container fixed width during animation?

[seltix5]

hi there!
e just confirm, the problem is related with the width but the visual problem is caused by the css " transform: translate(X px, Y px);"
Disablig this CSS here :
https://github.com/seltix5/mixitup/blob/v3/dist/mixitup.js#L9635
the problem desapear.
Offcourse if this transition is there is because it is needed for somme situations, but does this help with any ideas on how to solve it?
in this specific case, the "mix" elements have % width so they shouldnt translate since the margin will not be the specified, no?
thanks :D

[patrickkunka]

Thanks for the additional info. You're quite right – in this situation, there is no need for a translate to applied at all for a simple fade and scale in effect, although one would hope there would be no negative side effects to applying a translate of 0px.

I will try to look further into this in the next few days.

[seltix5]

glad to help.
let me know if need help testing something.
i also add "width: 100% !important;" to the container to make it responsible, it is just a sugestion but woldnt it be better to dont set the width by default and add a option to use this feature for specific cases where it wold be needed? it wold make it responsive by default and static if needed.
As i was writing this i was testing and remembered that i wold need to set "height: auto !important" too to make the height responsive too, and as i did that the problem is not there anymore for some reason... can you check it?
thanks.

[seltix5]

so, after further search i could find the transition happend because the interPosData position is diferent of finalPosData here :
https://github.com/seltix5/mixitup/blob/v3/dist/mixitup.js#L6539
that causes the css transform. then i search why this is happening and i found out why the "min-height" and the "height: auto !important" solves the problem...
here :
https://github.com/seltix5/mixitup/blob/v3/dist/mixitup.js#L6362
the container height is fixed to the current height and then the script gets the interPosData (there will be scroll only if the container has min-height or auto height).
when the script gets finalPosData the container height is at his normal height...

[patrickkunka]

Thanks again setlix, that makes perfect sense. I can envisage a fix now via the configuration object. Hopefully I'll get a patch out over the weekend.

[seltix5]

no problem, good luck and nice work your plugin is great :D ^^

[patrickkunka]

Hi @seltix5,

I've just pushed v3.1.11. This should fix the issue.

https://github.com/patrickkunka/mixitup/releases/tag/v3.1.11

Please let me know if it works for you.

[seltix5]

it does work now, but i still use the "height auto !important" because of the fixed height, but the width is responsive now and the translate problem is apparently solved.
great work =)

[patrickkunka]

Great,

BTW - if you don't want MixItUp to animate the container width/height, you can just set:

{
  animation: {
    animateResizeContainer: false
  }
}

Then you shouldn't need any !important rules