[Pro] Javascript for Search Field, Safari problems

If you are wondering why I used “initial” in the second line of the following code instead of “all”…

    -webkit-transition: all 0.4s ease-in-out;
    transition: initial 0.4s ease-in-out

…it’s because Explorer and even Edge are stupid. (Don’t we all know that by now?) Meaning, those lovely browsers from MS will cause the SVG to vanish until the 400ms is finish and then the roll state SVG will appear (yes, even when rolled by opacity change). Just plain stupid. To fix, I used the “initial” attribute on the “transition” line. That means most every other modern browser (Chrome, FF, Safari, etc., even on iOS) will show the ease-in-out just fine, but silly explorer won’t show the transition at all, just making the roll state appear instantly. I also found older versions of FF running on WinXP won’t show the transition due to my hack either, but that’s okay with me. And yes, I tested Opera on MacOS Sierra, and it works fine.

–James Wages


dynamo mailing list
email@hidden
Update your subscriptions at: