diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
index da41864b94..c6be0f46d1 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
@@ -628,20 +628,6 @@ export class ScadaSymbolObject {
}
this.svgShape = SVG().svg(svgContent);
-
- try {
- const userAgent = window.navigator.userAgent;
- if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) <= 127) {
- if (this.svgShape.defs().findOne('pattern')) {
- this.svgShape.defs().add(SVG('>'));
- this.svgShape.style()
- .rule('.' + 'empty-animation',
- {'animation-name': 'empty-animation', 'animation-duration': '1000ms', 'animation-iteration-count': 'infinite'})
- .addText('@keyframes empty-animation {0% {}100% {}}');
- }
- }
- } catch (e) {}
-
this.svgShape.node.style.overflow = 'hidden';
this.svgShape.node.style.position = 'absolute';
this.svgShape.node.style['user-select'] = 'none';
@@ -1182,6 +1168,22 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
private element: Element,
duration = 1000) {
this._duration = duration;
+ this.fixPatternAnimationForChromeBelow128();
+ }
+
+ private fixPatternAnimationForChromeBelow128(): void {
+ try {
+ const userAgent = window.navigator.userAgent;
+ if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) <= 127) {
+ if (this.svgShape.defs().findOne('pattern') && !this.svgShape.defs().findOne('pattern.empty-animation')) {
+ this.svgShape.defs().add(SVG(''));
+ this.svgShape.style()
+ .rule('.' + 'empty-animation',
+ {'animation-name': 'empty-animation', 'animation-duration': '1000ms', 'animation-iteration-count': 'infinite'})
+ .addText('@keyframes empty-animation {0% {}100% {}}');
+ }
+ }
+ } catch (e) {}
}
public running(): boolean {