[SOLVED] Why this code not working on SoloLearn but it works in chrome?

Question

it utilizes these things

CSS:
-webkit-background-clip: text;

JS:
canvas to image converter, to convert canvas frames to images frames on each loop

then it sets it as the background of div with translucent text

Independently all 3 things work fine on SL, But I wonder why when used together it won't work

Heres the desired effect image
https://imgur.com/6v3vtVJ

https://code.sololearn.com/Wc5147EK2Vko/?ref=app

Answer 1

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」
😮

Answer 2

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」
"Some CSS" fixed it and its Amazing!

Awesome Code Morpheus 👌😅

Answer 3

Morpheus
OH!! I GOT IT NOW!!
This is as same as what 「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 did
except her colour scribblings are all over the screen but you actually made it "Just within the Text"
AMAZING!!

Answer 4

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」
and that's the actual question he asked 😛
why this isnt working here but smooth over PC version 😰

Answer 5

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」
here ._.

https://code.sololearn.com/W3OM4E02fyS3/?ref=app

Answer 6

Morpheus
I have ZERO (absolute) knowledge of CSS and JS but still wanted to ask

Why in CSS→ canvas .. you set the Display to none?

Answer 7

Morpheus
I'm afraid I can't operate with Web version of SL this month (for so many reasons, lets not get into it)

would you please take a screeshot or something, I really want to see the actual output you are talkimg about 😶

Answer 8

Morpheus I've got the same question though.
There's a code I made as a Comic in Web version of SL. It was perfect over there but then I realized the Fonts are Neutral on Mobile version.

I'm not sure if CSS have got Dual personality for Web Version and Mobile Version for EXACT same code.

Answer 9

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」
Yeah, I guess you're right. Afterall, HTML CSS and JS are Web codes meant for Webpages. Major part of the world would care about it 😅

Answer 10

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 , Thank you so much😃😃😃

body{ position : relative} , 🔫🔫curse you!

My god it was a silly error after all, from 30 days ,

Answer 11

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 yeah it caused the whole issue running on one place , not on others,

Answer 12

Alright, here's a code I made few days ago.
I made it in Code Playground over PC version of SoloLearn which seems to be kinda fine for my knowledge but then I realised that in Mobile version, "Fonts" are not as same as Web Version.
I'm not sure what to do, here's the code:

https://code.sololearn.com/WJ6JG605oF7A/?ref=app

Answer 13

💮 BiShu 💮 added the expected results image at the main post

Answer 14

I ll sleep better tonight if I knew what went wrong on other platforms, 🙀

coz it doesn't works on SoloLearn, codepen, Mozilla Firefox

but only in chrome,

it's like a good puzzle 😅

Answer 15

💮 BiShu 💮 it's not the desired effect by 「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 , the animation only visible on letters

run my code on chrome to see the actual effects

Answer 16

💮 BiShu 💮 , perfect question ,👍, coz I m not displaying canvas animations,

but using canvas to draw a image and use it as background image for the div,

Answer 17

「ＨＡＰＰＹ ＴＯ ＨＥＬＰ」 , no it is like this from one month , it works perfectly on Chrome but not on SoloLearn,
and I don't know why,🙀