Project

General

Profile

Bug #1925

Minification breaks "highlighted-ok" animation

Added by Luke Murphey almost 7 years ago. Updated almost 7 years ago.

Status:
Closed
Priority:
Normal
Assignee:
Luke Murphey
Category:
Dashboard: Input Editor
Target version:
4.3.0
Start date:
07/11/2017
Due date:
% Done:

100%

Associated revisions

Revision 465 (diff)
Added by lukemurphey almost 7 years ago

Fixing issue where minification broke animation

Reference #1925

History

#1 Updated by Luke Murphey almost 7 years ago

This repros:

.browserWorks {
    color: green;
    -moz-animation: highlighted-ok .5s;
    -webkit-animation: highlighted-ok .5s;
    -o-animation: highlighted-ok .5s;
    animation: highlighted-ok 1.5s;
}

.browserDoesntWork {
    color: red;
    -moz-animation: highlighted-not-ok .5s;
    -webkit-animation: highlighted-not-ok .5s;
    -o-animation: highlighted-not-ok .5s;
    animation: highlighted-not-ok .5s
}

.browserChecking {
    background-image: url(/static/app/website_input/img/spiffygif_14x14.gif);
    background-repeat: no-repeat;
    padding-left: 16px
}

@keyframes highlighted-ok {
    0 {
        background: #58c126;
        box-shadow: 0 0 0 0 #58c126
    }

    70% {
        box-shadow: 0 0 0 10px rgba(204,169,44,0)
    }

    100% {
        background: inherit;
        box-shadow: 0 0 0 0 rgba(204,169,44,0)
    }
}

@keyframes highlighted-not-ok {
    0 {
        background: red;
        box-shadow: 0 0 0 0 red
    }

    70% {
        box-shadow: 0 0 0 10px rgba(204,169,44,0)
    }

    100% {
        background: inherit;
        box-shadow: 0 0 0 0 rgba(204,169,44,0)
    }
}

#2 Updated by Luke Murphey almost 7 years ago

This fixes it:

@keyframes highlighted-ok {
  0% {
    background: #58c126;
    box-shadow: 0 0 0 0 #58c126;
  }

  70% {
    box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }

  100% {
    background: inherit;
    box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

This repros:

@keyframes highlighted-ok {
    0 {
        background: #58c126;
        box-shadow: 0 0 0 0 #58c126;
    }

    70% {
        box-shadow: 0 0 0 10px rgba(204,169,44,0);
    }

    100% {
        background: inherit;
        box-shadow: 0 0 0 0 rgba(204,169,44,0);
    }
}

#3 Updated by Luke Murphey almost 7 years ago

This can be fixed by forcing the minimizer to stop changing 0% to 0:

@keyframes highlighted-ok {
    0.1% {
        background: #58c126;
        box-shadow: 0 0 0 0 #58c126;
    }

    70% {
        box-shadow: 0 0 0 10px rgba(204,169,44,0);
    }

    100% {
        background: inherit;
        box-shadow: 0 0 0 0 rgba(204,169,44,0);
    }
}

#4 Updated by Luke Murphey almost 7 years ago

  • Status changed from New to Closed
  • % Done changed from 0 to 100

Also available in: Atom PDF