Disable single CSS transition not working in Firefox

Question

Is it possible to add a transition for all, but just disable a single one too? For example:

textarea {
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 0s;
}

textarea:focus {
  color: #333;
  border: 3px solid #f00;
  padding: 10px;
}

<textarea>text</textarea>

You see (at least in firefox) that on resize of the box, that it lags. In Chrome and IE there is no problem with it, works fine.

Also using a time like 1ms for disabling is not working:

textarea {
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  transition: all 0.5s, height 1ms;
}

<textarea placeholder="test"></textarea>

I don't understand your question? It's `all` except `height`?! I don't want to add every single attribute in this case. That would be a solution, I know. But I was hoping there is a way to do it like this. ;) @BrettDeWoody — eisbehr, Mar 06 '18 at 08:58
Possible duplicate of [How do I apply CSS3 transition to all properties except background-position?](https://stackoverflow.com/questions/10604389/how-do-i-apply-css3-transition-to-all-properties-except-background-position) — Brett DeWoody, Mar 06 '18 at 08:59
Change the transition duration of the property you don't want to transition to `1ms`. — Brett DeWoody, Mar 06 '18 at 09:00
Already did this, it's not working too. Added this to the question too. So this is no duplicate. @BrettDeWoody — eisbehr, Mar 06 '18 at 09:02
Back to the original question then, can you update the question to show the transitions you're applying so we can reproduce the exact issue. — Brett DeWoody, Mar 06 '18 at 09:03
Just resize the box height in my example in firefox. You will see that the resize lags/hangs. Everything else is fine. @BrettDeWoody — eisbehr, Mar 06 '18 at 09:07
But what are you transitioning that you need the transition in the first place? — Brett DeWoody, Mar 06 '18 at 09:11
I use different transitions on this element, like text color, border color, size, ... I could write everything manually, but it would be nice if I could use `all` instead, to keep it small. I added some other transitions to the first example if it is helpful for you ... @BrettDeWoody — eisbehr, Mar 06 '18 at 09:15

Lib3r74 · Answer 1 · 2018-03-06T09:40:25.653

0

Do you want to disable the transition only in firefox browser thought?

Have you tried to use -moz-document url-prefix ?

@-moz-document url-prefix() { 
  textarea{
     transition:none !important;
  }
}

or you can set:

  textarea{
  width: 400px;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 0s;
-moz-transition-property: none;
}

edited Mar 06 '18 at 09:40

answered Mar 06 '18 at 09:34

Lib3r74

1
4

No, for all browsers. Firefox is just the only one where it's not working. – eisbehr Mar 06 '18 at 09:35
my code is for disable CSS transition for Firefox, wrong title? – Lib3r74 Mar 06 '18 at 09:37
It's told in the question. But I updated the title to be more clear. – eisbehr Mar 06 '18 at 09:38
for "all" you mean browsers? Look 2nd example, working for all browsers and block the transition only in firefox – Lib3r74 Mar 06 '18 at 09:42
No, i mean `transition: all`. – eisbehr Mar 06 '18 at 11:29

score 0 · Answer 2 · answered Mar 06 '18 at 09:55

0

The use of transition: none seems to be working.

For example i created one with transition and one without.

    textarea {
      width: 400px;
      height: 60px;
      min-height: 60px;
      resize: vertical;
      transition: all 0.5s, height 1ms;
    }
    
    textarea.notransition{
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }

<textarea class="notransition">without transition</textarea> <textarea>with transition</textarea>

And you have the following CSS.
- I added a class to textarea if you want a textarea without transition / you also can create a new class for other stuff if you want.

I hope this example is usefull for you.

answered Mar 06 '18 at 09:55

Thanks for your answer, but please read the question again. That is not what I want. – eisbehr Mar 06 '18 at 11:29
@eisbehr sry i dont get your question could you specify it please ? – Mar 06 '18 at 12:27
I don't want all transition to be remove, only a single one for all entries. So a second class is not an option. See my first example. – eisbehr Mar 06 '18 at 13:40

Brett DeWoody · Answer 3 · 2018-03-06T14:34:45.807

0

Seems like a bug with Firefox, and I can't see any reliable CSS-only solution. So here's a JS solution.

We'll add an event listener on focus which removes the transition after a delay, then re-adds the transition on blur.

const fixFirefoxResizeTransition = el => {
  const elTransition = el.style.transition;
  const elTransitionDuration = parseFloat(getComputedStyle(el)['transitionDuration']) * 1000;
  
  el.addEventListener("focus", () => {
    setTimeout(() => {
      el.style.transition = "none"
    }, elTransitionDuration);
  });

  el.addEventListener("blur", () => {
    el.style.transition = elTransition;
  });
}

fixFirefoxResizeTransition(document.querySelector("textarea"));

textarea {
  width: 100%;
  height: 60px;
  min-height: 60px;
  resize: vertical;
  box-sizing: border-box;
  color: #ccc;
  border: 1px solid #ccc;
  transition: all 0.3s, height 1ms;
}

textarea:focus {
  color: #333;
  border: 3px solid #f00;
  padding: 10px;
}

<textarea>text</textarea>

edited Mar 06 '18 at 14:34

answered Mar 06 '18 at 14:06

Brett DeWoody

59,771
29
135
184

But this would not work when resize the box without focus. ;) I think you may be right, it's a bug and I have no solution too. Think I must split all transitions into single arguments. Thanks anyway ... – eisbehr Mar 06 '18 at 16:11
Hmm, yes true. It would be necessary to detect a click on the resize, vs a click on the textarea in that case. – Brett DeWoody Mar 06 '18 at 16:37
I've looked into a few options, but other than detecting clicks in the bottom-right corner of the element, there's no way to know the element is being resized vs focused. – Brett DeWoody Mar 07 '18 at 23:44

Disable single CSS transition not working in Firefox

3 Answers3