Transition适用于Chrome，但不适用于Firefox

Question

The transition works perfectly on Google Chrome, but on Firefox it just won't animate:

jsfiddle

Any ideas how to fix this?

.switch_wrap .switch .bullet {
    -webkit-transition: left 0.1s linear;
    -moz-transition: left 0.1s linear;
    -ms-transition: left 0.1s linear;
    -o-transition: left 0.1s linear;
    transition: left 0.1s linear;
}

Answer 1

The problem seems to be with dispalay: none on the pseudo-elements. When toggling the display, FireFox just behaves a bit differently. The workaround is to make them both visible in both states and toggle their content. Also, you set a z-index so that the switch is over the :after element (needed espacially when the content OFF is not toggled and the text stays visible).

DEMO

For switching text:

.switch_wrap .switch::before,
.switch_wrap .switch::after {
  content: ''; <-- changed here
}

.switch_wrap .switch::after {
  /*content: '';*/ <-- removed here
  display: block;
  right: 0;
}

.switch_wrap input[type="checkbox"] + .switch:after {
  content: 'OFF';
}

.switch_wrap input[type="checkbox"]:checked + .switch:after {
  content: '';
}

.switch_wrap input[type="checkbox"]:checked + .switch:before {
  content: 'ON';
}

Then z-indexes:

.switch_wrap .switch::before,
.switch_wrap .switch::after {
    /* ... */
    z-index: -1;
}

.switch_wrap .switch {
    /* ... */
    z-index: 16;
}

And the display toggling is removed.

Tested in both Chrome and firefox.