Hey @all,

here is quick fix for the chrome animation problem:

Open the css/animation.css
Replace this code from line 58-61:

@-webkit-keyframes slide {    
    from{ background: left; }    
    to{ background: right; }     
}  

with following code:

@-webkit-keyframes slide {    
    from{ background-position: 0 0; }    
    to{ background-position: 100% 0; }     
}

There will be a permanent fix in the next Inspire Theme update.

Regards,
Pawel

Aksel,

Thanks for reporting this. I have indeed confirmed this issue on the Flares Style loads with a black screen. I think there is an issue with the animation style below working in Chrome. I can't determine what specifically the issue is. However, when I remove it, the flares background loads. However, it doesn't have the nice flare animation as seen in Firefox.

.top-a-layer-1{  
    -webkit-animation: slide 20s linear infinite;  
}

I'm reporting this now to the YOOtheme Developers.

Best Regards,

David Carroll

UPDATE: Disabled animation on only webkit based browsers by setting duration from 20s to 0s.

Try adding the following script to /css/custom.css file or a custom style folder if you have one:

.top-a-layer-1{          
    -webkit-animation: slide 0s linear infinite;  
}

Please verify this works and let me know if I was able to address your immediate issue.

Best Regards,

David Carroll

Hi David,

I added your line to the flares.css. It kept getting overwritten while adding it to my style or my custom.css.

Now the flares background image shows correct, but no animation though.

Aksel,

I just reordered the -webkit-animation properties in my last answer. You mind retrying?

Thanks,

David Carroll

The flarebackground went black again now

Can you share a link I can test against?

I'ts a development site..can't find a PM function to send it to you. I'd rather not post the link here in public.

No worries... I was able to setup a demo site and tried getting this working for Chrome. There must be some issue with the slide animation on the webkit browsers. The other animations appear to work fine. Anyway, I updated the earlier CSS to just disable the slide animation for webkit browsers.

Hi David,

Thank you for the quick answers..
I've added the :

.top-a-layer-1{
-webkit-animation: slide 0s linear infinite;
}

to flames css file and the flames appear now but no animation... I will take a look to the code when I will have some time and if I find the solution I will put it here...that if you guys don;t fix this sooner

Thank you again,
B.

Thanks Bogdan for the update.

Yes... the only solution I could come up with was to disable the animation until this could be resolved. I tested with different duration settings 1s, 4s, 10s, 20s and simply could not bypass the black screen when using the "slide" animation. I applied some keyframe settings for the slide name and made some progress with the black slide moving around revealing the flares. But, the black layer remained solid black.

I'd be interested to see if you can uncover the issue.

Best Regards,

David Carroll

What is the status on this resolution?

I am able to get Chrome to display a static browser but it creates issues on the iPad. This issue has been open for 27 days. Considering that 38% of internet users are using Chrome, this is a big problem and it appears that nothing is being done.

In the future, it would be better if these known issues were listed so that we can choose to avoid themes that have serious, unresolved issues.

Agree with rud0lph

is there a fix coming for this?

HI all, i have a solution:

<script type="text/javascript">   
    if (navigator.userAgent.toLowerCase().match('chrome')){  
document.write('<style type="text/css">');  
document.write('.top-a-layer-1{-webkit-animation: none!important;}');  
document.write('</style>');}  
</script>

IT WORK GREAT ON CHROME without animation...