So I followed the tutorial here.
I modified it a bit so that there was no animation, and I used jquery to check whether the browser was webkit or not, and depending on that, add the class for making the knockout letters.
if ($.browser.webkit) {
$("#rooday h1").addClass('webkit');
} else {
$("#rooday h1").removeClass('webkit');
}
The jquery worked, however the text was invisible on the website. Using inspect element, I found out that the text re-appeared after disabling -webkit-text-fill-color: transparent
Is this a known issue that knockout only works when set at the load of the file? Any help is appreciated! An if you want the code, here is a JSfiddle. (I removed some parts of it to reduce the amount of errors in the console, and commented out a part of the JS that wouldn’t work through JSfiddle, but trust me that part works)
The main issue here is that the part at the top that is the strip of space background should be text that says “ROODAY” with knockout, but for some reason when I do that through adding a class -webkit-text-fill-color: transparent makes it invisible, but not when I add this CSS to the element’s specific CSS at the start.
