Bug 191265

Summary: Adding @keyframes to a style tag via innerHTML doesn't seem to work
Product: WebKit Reporter: Jason Williams <jase.williams>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, dino, graouts, jase.williams, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 11   
Hardware: All   
OS: All   
URL: https://codepen.io/jasonwilliams1/pen/NEqWbG
Attachments:
Description Flags
Chrome Dev Tools showing Keyframes are parsed none

Description Jason Williams 2018-11-05 09:04:46 PST 
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
Comment 1 Jason Williams 2018-11-05 09:05:05 PST 
Linked with https://github.com/webcompat/web-bugs/issues/20910
Comment 3 Radar WebKit Bug Importer 2018-11-07 02:09:20 PST 
<rdar://problem/45869859>
Comment 4 Ahmad Saleem 2022-09-12 04:19:05 PDT 
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!