SlideUp not working in Firefox

[pfasang]

Hi, I discovered bug, that slideUp is not working properly.

Firefox version: 74.0.1 (64-bit)

[BrentonCozby]

Hi @pfasang

I tested the latest version of dom-slider in the lastest version of Firefox and found no issues. Please provide more details that can help me recreate your issues; details such as:

• any errors in the javascript console
• your version of dom-slider
• your version of firefox

[pfasang]

• no errors
• dom-slider 2.1.1
• Firefox 74.0.1

SlideToggle works only with SlideDown. Animation on SlideDown is smooth, but when you want to use SlideUp => collapse element, slideUp animation not working, element is hidden immediately. On other browsers works fine.

[jan-vodila]

Hello, I have same issue here:

• Chrome: Version 80
• dom-slider: Version 2.1.1

SlideUp just jumps between states without animation.

[BrentonCozby]

Hi @jan-vodila it is working fine for the example I provided in the repo.

Could you please share an example where it is buggy?

[BrentonCozby]

@pfasang I notice that the slideDown method works fine but the slideUp method jumps partially. I've been doing some research and testing in Firefox and I'm not sure how to fix this. Sorry :(

If there are other issues I did not catch, please provide a code example which allows me to recreate the issues.

[jan-vodila]

Hi @BrentonCozby,

well, it really does work in your example. I figured out that when I set a delay to 10ms, then it works smooth for me as well. I think that issue is there only when Style & Layout take much more time than in your simple example. So basically, for "bigger" website the transition is not applied before DOM-slider-hidden class is applied to element. Funny thing is that it breaks only on slideUp, slideDown works perfectly fine.

[BrentonCozby]

Oh wow. I used to include that 10ms delay but removed it because it didn't seem to make a difference when I was creating version 2.0.0 and because it seems very "hacky".

Anyway, I've added a 20ms minimum delay in the latest release (2.1.4).

[BrentonCozby]

@jan-vodila @pfasang please let me know if the new release (see previous comment) fixes your issues.

[pfasang]

working, thanks

[dmikester1]

I'm having the same issue. No errors in console. Dom-Slider Version 2.1.4. Firefox Developer 80.0b3. Also tested on Chrome 84.0.4147.105 and Firefox 79. I've tried toggle, up, and down with large timings, 1300-1500. And it just flashes there and flashes away. No sliding.

If if matters, this is my div css that is being slid in and out.

.message {
  display: none;
  position: absolute;
  top: 0;
  text-align: center;
  width: 60%;
  background-color: rgba(200, 0, 0, 0.6);
  border: 3px solid rgba(200, 0, 0, 0.8);
  color: #ffffff;
  font-size: 2.5em;
}

[dmikester1]

Should I open a new issue so I'm not adding to a closed issue?

[BrentonCozby]

Hi @dmikester1, I'm hoping I'll have a chance to look into it later this week. No need to open a new issue--sounds like your issue is related enough to this one. I'll re-open this issue.

[dmikester1]

Thanks! I appreciate it.

[BrentonCozby]

Let's see if I can upload a GIF screen recording... (it's 7MB so you might have to wait a second). The only differences from the CSS you provided are the padding and the top (I changed the top so it wouldn't cover the "toggle" button). This is Firefox version 79.0 (64-bit) on a macbook pro. It appears to be working fine for me.

[BrentonCozby]

Here's the CSS upon screen load for that div.box (below). It still works correctly when I copy your CSS exactly (the padding is just different)

[BrentonCozby]

@dmikester1 could you provide some more context? Some javascript and some more html/css surrounding the buggy elements?

Also, is it all elements that flash instead of slide? Or just the one with the CSS you already provided