Bug 191265 – Adding @keyframes to a style tag via innerHTML doesn't seem to work

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Jason Williams]

Created attachment 353867 [details]
Chrome Dev Tools showing Keyframes are parsed

* Steps to Replicate: *
* Navigate to https://codepen.io/jasonwilliams1/pen/NEqWbG using Safari
* Notice the marquee doesn't move

* Description *
Adding @Keyframes to a <style> tag via `.innerHTML()' doesn't seem to work on Safari browsers. Tested on Version 11.1.2 (13605.3.8)

This does however, work on:
Chrome Chrome 70.0.3538
FireFox Developer Edition 64.0b5 (64-bit)
Microsoft Edge 41.16299.15.0
Although .innerHTML() isn't an ideal way of adding styles to an <style> element, this does work in some browsers and not others.

The attachment shows that chrome understands the stylerules once applied

[Jason Williams]

Linked with https://github.com/webcompat/web-bugs/issues/20910

[Jason Williams]

W3 link: https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

[Radar WebKit Bug Importer]

<rdar://problem/45869859>

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 153, "Scrolling Text" is behaving like marquee and moving and look similar to Chrome Canary 107 and Firefox Nightly 106.

I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Please reopen, if it is still reproducible by anyone and preferably with updated test case. Thanks!