padding-top and padding-bottom is wrongly calculated

[lubomirblazekcz]

padding-top and padding-bottom is wrongly calculated when element is closed by default with display: none or DOM-slider-hidden

on the first opening the padding-top and padding-bottom is always 0px

[lubomirblazekcz]

https://jsfiddle.net/tr3v1cky/8/

here is demo, it happens always - seems that box-sizing: border-box is the main problem

solution would be not subtracting the paddings when border-box is set

[BrentonCozby]

@evromalarkey I've published the fix you mentioned and updated the CDN link in the README. Unfortunately, this only seems to fix it after the first call to slideToggle; the transition jumping becomes smooth with every slideToggle after the first one.

I've actually seen this bug before but I'm still unaware of a solution.

[lubomirblazekcz]

Thanks for the quick fix, I was able to fix it even on the first slide. You have to add paddingTop and paddingBottom when the element is hidden, because before that the padding is always 0, so if you add condition for borderBox here also, it should fix it.

        if (slideDirection === 'down' && isDisplayNoneByDefault) {
            element.classList.add('DOM-slider-hidden');
            element.style.display = visibleDisplayValue;
            contentHeight = Math.max(element.scrollHeight + paddingTop + paddingBottom, 0);
        } // a fixed height is required in order to animate the height

[BrentonCozby]

...You have to add paddingTop and paddingBottom when the element is hidden, because before that the padding is always 0, so if you add condition for borderBox here also, it should fix it.

        if (slideDirection === 'down' && isDisplayNoneByDefault) {
            ...
            contentHeight = Math.max(element.scrollHeight + paddingTop + paddingBottom, 0);
        }

@evromalarkey Unfortunately, this breaks the FAQs in the example.html I provided, causing them to expand too far.