0

I'd like to apply a transparent gradient to a component. Actually it works.

But when I animate an element within this element, it makes chrome49 crash. It works in chrome57 on my MacBook but I need this to work in chrome49 on an embedded system.

Here is the gradient definition:

.zapband {
    -webkit-mask-image: -webkit-linear-gradient(
        left,
        rgba(255, 255, 255, 0) 16%,
        rgba(255, 255, 255, 1) 40%,
        rgba(255, 255, 255, 1) 60%,
        rgba(255, 255, 255, 0) 84%
    );
}

And the animation that works without the gradient:

.focus-anime, .focus-anime1 {
    animation: 200ms linear focusBlink;
    animation-fill-mode: forwards;
    animation-iteration-count: 1; 
}
.focus-anime1 {
    animation-name: focusBlink1;
}

@keyframes focusBlink {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}
@keyframes focusBlink1 {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

Could it be that chrome49 can't handle both declarations? Or can this be a memory problem?

manuAcl
  • 311
  • 1
  • 10
  • Don't think it will matter, though you have the shorthand properties in wrong order, should be `animation: focusBlink 200ms linear;` – Asons May 03 '17 at 20:12
  • Have you tried to only run the animation on one of the two elements only? – Asons May 03 '17 at 20:13
  • @LGson I tried, still makes chrome crash – manuAcl May 04 '17 at 10:35
  • Well, then I guess the easiest would be to create a png with such gradient and use it instead ... and you could do that dynamically too, check this trick: http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf – Asons May 04 '17 at 10:46

0 Answers0