why js keyframe (cssrules) script won't work with IE edge and it work in chrome and firefox?
1
why js keyframe (cssrules) script for Seconds Time which will see in codepen link won't work with IE EDGE and it work in chrome and firefox with two different solution with same result in the following links
Solution 1
function clockRingSecond(angle, key) {
"use strict";
var d = document,
stylesheet = d.styleSheets[0],
rule = stylesheet.cssRules,
i = rule.length,
keyframes,
keyframe,
n = "spinRing";
while (i--) {
keyframes = rule.item(i);
if (
(keyframes.type === keyframes.KEYFRAMES_RULE ||
keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ||
keyframes.type === keyframes.MOZ_KEYFRAMES_RULE ||
keyframes.type === keyframes.MS_KEYFRAMES_RULE ||
keyframes.type === keyframes.O_KEYFRAMES_RULE) &&
keyframes.name === n
) {
rule = keyframes.cssRules;
i = rule.length;
while (i--) {
keyframe = rule.item(i);
if (
(keyframe.type === keyframe.KEYFRAME_RULE ||
keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ||
keyframe.type === keyframe.MS_KEYFRAME_RULE) &&
keyframe.keyText === key
) {
keyframe.style.webkitTransform = "rotate(" + angle + "deg)";
keyframe.style.msTransform = "rotate(" + angle + "deg)";
keyframe.style.transform = "rotate(" + angle + "deg)";
break;
}
}
break;
}
}
}
secondTimeHand();
and
Solution 2
function seckey(ruleText) {
var sheets = document.styleSheets;
if (sheets.length == 0) {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
}
var sheet = sheets[sheets.length - 1];
sheet.insertRule(
ruleText,
sheet.rules ? sheet.rules.length : sheet.cssRules.length
);
}
secondTimeHand();
This two solution I found it in some post here.
Please help and thank you in advance
Please Note that it works with before and now it stop
javascript html css
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
add a comment |
1
why js keyframe (cssrules) script for Seconds Time which will see in codepen link won't work with IE EDGE and it work in chrome and firefox with two different solution with same result in the following links
Solution 1
function clockRingSecond(angle, key) {
"use strict";
var d = document,
stylesheet = d.styleSheets[0],
rule = stylesheet.cssRules,
i = rule.length,
keyframes,
keyframe,
n = "spinRing";
while (i--) {
keyframes = rule.item(i);
if (
(keyframes.type === keyframes.KEYFRAMES_RULE ||
keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ||
keyframes.type === keyframes.MOZ_KEYFRAMES_RULE ||
keyframes.type === keyframes.MS_KEYFRAMES_RULE ||
keyframes.type === keyframes.O_KEYFRAMES_RULE) &&
keyframes.name === n
) {
rule = keyframes.cssRules;
i = rule.length;
while (i--) {
keyframe = rule.item(i);
if (
(keyframe.type === keyframe.KEYFRAME_RULE ||
keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ||
keyframe.type === keyframe.MS_KEYFRAME_RULE) &&
keyframe.keyText === key
) {
keyframe.style.webkitTransform = "rotate(" + angle + "deg)";
keyframe.style.msTransform = "rotate(" + angle + "deg)";
keyframe.style.transform = "rotate(" + angle + "deg)";
break;
}
}
break;
}
}
}
secondTimeHand();
and
Solution 2
function seckey(ruleText) {
var sheets = document.styleSheets;
if (sheets.length == 0) {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
}
var sheet = sheets[sheets.length - 1];
sheet.insertRule(
ruleText,
sheet.rules ? sheet.rules.length : sheet.cssRules.length
);
}
secondTimeHand();
This two solution I found it in some post here.
Please help and thank you in advance
Please Note that it works with before and now it stop
javascript html css
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
I gues its because first pen has support prefix for css animation in microsoft browsers-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867
– Smollet777
Nov 17 '18 at 14:29
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38
add a comment |
1
1
1
why js keyframe (cssrules) script for Seconds Time which will see in codepen link won't work with IE EDGE and it work in chrome and firefox with two different solution with same result in the following links
Solution 1
function clockRingSecond(angle, key) {
"use strict";
var d = document,
stylesheet = d.styleSheets[0],
rule = stylesheet.cssRules,
i = rule.length,
keyframes,
keyframe,
n = "spinRing";
while (i--) {
keyframes = rule.item(i);
if (
(keyframes.type === keyframes.KEYFRAMES_RULE ||
keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ||
keyframes.type === keyframes.MOZ_KEYFRAMES_RULE ||
keyframes.type === keyframes.MS_KEYFRAMES_RULE ||
keyframes.type === keyframes.O_KEYFRAMES_RULE) &&
keyframes.name === n
) {
rule = keyframes.cssRules;
i = rule.length;
while (i--) {
keyframe = rule.item(i);
if (
(keyframe.type === keyframe.KEYFRAME_RULE ||
keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ||
keyframe.type === keyframe.MS_KEYFRAME_RULE) &&
keyframe.keyText === key
) {
keyframe.style.webkitTransform = "rotate(" + angle + "deg)";
keyframe.style.msTransform = "rotate(" + angle + "deg)";
keyframe.style.transform = "rotate(" + angle + "deg)";
break;
}
}
break;
}
}
}
secondTimeHand();
and
Solution 2
function seckey(ruleText) {
var sheets = document.styleSheets;
if (sheets.length == 0) {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
}
var sheet = sheets[sheets.length - 1];
sheet.insertRule(
ruleText,
sheet.rules ? sheet.rules.length : sheet.cssRules.length
);
}
secondTimeHand();
This two solution I found it in some post here.
Please help and thank you in advance
Please Note that it works with before and now it stop
javascript html css
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
why js keyframe (cssrules) script for Seconds Time which will see in codepen link won't work with IE EDGE and it work in chrome and firefox with two different solution with same result in the following links
Solution 1
function clockRingSecond(angle, key) {
"use strict";
var d = document,
stylesheet = d.styleSheets[0],
rule = stylesheet.cssRules,
i = rule.length,
keyframes,
keyframe,
n = "spinRing";
while (i--) {
keyframes = rule.item(i);
if (
(keyframes.type === keyframes.KEYFRAMES_RULE ||
keyframes.type === keyframes.WEBKIT_KEYFRAMES_RULE ||
keyframes.type === keyframes.MOZ_KEYFRAMES_RULE ||
keyframes.type === keyframes.MS_KEYFRAMES_RULE ||
keyframes.type === keyframes.O_KEYFRAMES_RULE) &&
keyframes.name === n
) {
rule = keyframes.cssRules;
i = rule.length;
while (i--) {
keyframe = rule.item(i);
if (
(keyframe.type === keyframe.KEYFRAME_RULE ||
keyframe.type === keyframe.WEBKIT_KEYFRAME_RULE ||
keyframe.type === keyframe.MS_KEYFRAME_RULE) &&
keyframe.keyText === key
) {
keyframe.style.webkitTransform = "rotate(" + angle + "deg)";
keyframe.style.msTransform = "rotate(" + angle + "deg)";
keyframe.style.transform = "rotate(" + angle + "deg)";
break;
}
}
break;
}
}
}
secondTimeHand();
and
Solution 2
function seckey(ruleText) {
var sheets = document.styleSheets;
if (sheets.length == 0) {
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
}
var sheet = sheets[sheets.length - 1];
sheet.insertRule(
ruleText,
sheet.rules ? sheet.rules.length : sheet.cssRules.length
);
}
secondTimeHand();
This two solution I found it in some post here.
Please help and thank you in advance
Please Note that it works with before and now it stop
javascript html css
javascript html css
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
edited Nov 17 '18 at 14:27
Abdullah Ockba
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
asked Nov 17 '18 at 14:20
Abdullah OckbaAbdullah Ockba
3917
3917
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
I gues its because first pen has support prefix for css animation in microsoft browsers-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867
– Smollet777
Nov 17 '18 at 14:29
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38
add a comment |
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
I gues its because first pen has support prefix for css animation in microsoft browsers-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867
– Smollet777
Nov 17 '18 at 14:29
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
I gues its because first pen has support prefix for css animation in microsoft browsers
-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867– Smollet777
Nov 17 '18 at 14:29
I gues its because first pen has support prefix for css animation in microsoft browsers
-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867– Smollet777
Nov 17 '18 at 14:29
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53352079%2fwhy-js-keyframe-cssrules-script-wont-work-with-ie-edge-and-it-work-in-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53352079%2fwhy-js-keyframe-cssrules-script-wont-work-with-ie-edge-and-it-work-in-chrome%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please Note that it works with before and now it stop
– Abdullah Ockba
Nov 17 '18 at 14:26
I gues its because first pen has support prefix for css animation in microsoft browsers
-ms-animation. Take a look what vendor prefixes is lifewire.com/css-vendor-prefixes-3466867– Smollet777
Nov 17 '18 at 14:29
Thank you but I already add the all prefixes with same Problem
– Abdullah Ockba
Nov 17 '18 at 14:38