SO CSS animations overriding snippet CSS animations

Question

Take the code below, which should flash the <div> from red to blue:

@keyframes flash {
    from { background-color: red; }
    to {background-color: blue; }
}

div {
    padding: 20px;
    border: 1px solid black;
    animation: flash 2s infinite;
}

<div>I should be flashing from red to blue!</div>

I came across this recently while answering a question and spent about 10 minutes trying to figure out how I had gone so horribly wrong, before realizing that some of SO's CSS was overriding my own.

Is this known? Are there other examples of this?

The default styles should be inserted before the user-entered styles. Currently it's the other way around. i.sstatic.net/PPWqU.png — Samuel Liew
– Samuel Liew Mod, Commented Aug 3, 2018 at 2:54
S t a c k S n i p p e t s a r e t h e s u p e r i o r H T M L / C S S / J S r u n n a b l e s n i p p e t s o l u t i o n — BoltClock
– BoltClock Mod, Commented Aug 3, 2018 at 4:04
(This is an issue with pretty much all sites of this kind - it's only egregious on Stack Snippets because 1) it was introduced as an in-house alternative to third-party off-site solutions and 2) apparently Stack Snippets even threw in a gratuitous animation.) — BoltClock
– BoltClock Mod, Commented Aug 3, 2018 at 4:18
All that CSS for the console, which was a user contribution. There is a feature request to Sandbox the console separately. — user4639281
– user4639281, Commented Aug 3, 2018 at 6:35
Woow, they really used an animation called flash, am pretty sure it's new, right? — Temani Afif
– Temani Afif, Commented Aug 3, 2018 at 8:28
That looks like flashing yellow to blue here. Is it supposed to do that? — Mast
– Mast, Commented Aug 3, 2018 at 8:28
@TemaniAfif A very faintish white-blue. Firefox Quantum 61.0.1 x64 — Mast
– Mast, Commented Aug 3, 2018 at 8:34
I might be wrong about the blue, seeing colours is a subjective thing after all and the suggestion of there being something blue on your screen does wonders, but this is definitely yellow, not red. — Mast
– Mast, Commented Aug 3, 2018 at 8:37
It seems to be fading from yellow to white to me, @Mast. Precisely the animation you see when following a link to an answer or comment; it will flash (ha!) for a moment to highlight it. — Just a student
– Just a student, Commented Aug 3, 2018 at 8:46
@BoltClock It's better broken than not-working at all after one year :) — Skipper
– Skipper, Commented Aug 3, 2018 at 13:26
Serves you right for using such a: generic, overloaded, common, almost-meaningless, label as "flash". ;) You should use something helpful and uniquely descriptive like "redToBlue", or "flashRedBlu", or "copFlash", etc. — Brock Adams
– Brock Adams, Commented Aug 3, 2018 at 20:36
I ran into this the other day and wasted time in much the same way. I feel bad I didn't make post about it now but I thought it was known. — zero298
– zero298, Commented Aug 20, 2018 at 19:12
@Braiam Not consistently at all, tbh. Browsers need to hurry up with support for that. — TylerH
– TylerH, Commented Aug 20, 2018 at 21:23

canon · Accepted Answer · 2018-08-20 19:06:11Z

16

It's the snippet console CSS, evidenced by disabling the console output:

<!-- begin snippet: js hide: false console: false babel: false -->

Demo:

@keyframes flash {
    from { background-color: red; }
    to {background-color: blue; }
}

div {
    padding: 20px;
    border: 1px solid black;
    animation: flash 2s infinite;
}

<div>I should be flashing from red to blue!</div>

A quick fix would be for SO to rename flash to as-console-flash (or whatever namespaced variant they choose).

Still, the whole thing ought to be redone to sandbox the console visualization via shadow dom (lol?), frame messaging, or something.

edited Aug 20, 2018 at 19:06

answered Aug 3, 2018 at 19:54

canon

41.9k4 gold badges33 silver badges50 bronze badges

1

It's also definitely stacksnippets.net, because the two look identical when the JavaScript for the site is disabled.

wizzwizz4
– wizzwizz4

2018-08-03 20:14:29 +00:00
Commented Aug 3, 2018 at 20:14
2

So, I'm somewhat inexperienced with Meta - for a bug report, what criteria must an answer meet for me to mark it accepted? Thanks for the explanation.

Tyler Roper
– Tyler Roper

2018-08-04 02:32:52 +00:00
Commented Aug 4, 2018 at 2:32
5

@TylerRoper Hopefully a StackExhange employee will post an answer stating they've fixed the issue and you can accept that.

canon
– canon

2018-08-04 02:34:39 +00:00
Commented Aug 4, 2018 at 2:34

Add a comment |

SO CSS animations overriding snippet CSS animations

1 Answer 1

You must log in to answer this question.

Linked

Hot Network Questions

1 Answer 1

You must log in to answer this question.

Linked

Related