Viewon : Why my objects are not properly displayed in Chrome and Edge ?

This article describes what you can do if you recently faced a rendering issue of your Viewon dashboards in Chrome or Edge (not in Firefox) : 

Viewon:

Result in Firefox : OK

Result in Edge : NOK

This rendering issue is caused by a bug introduced in version 136.0.0.0 of the Chromium engine, which powers browsers such as Edge, Chrome, and others (Chromium issue #416091463).

The bug occurs when using Viewon's rotation feature to rotate objects and symbols.

Below is a temporary workaround you can apply within Viewon while the Chromium community works on a permanent fix.

APPLICABLE PRODUCTS

Viewon Software

Ewon: Flexy

Ewon: xxxxCD

ISSUE

Wrong rendering of the Viewon dashboard due to a bug in Chromium.

WORKAROUND

1. Edit the file C:\Program Files (x86)\ViewON\htmlsources\css\viewon-core-1.2.0.css and add the following lines at the top of it : 
    

   .is-chromium svg {
    will-change: transform;
    transform: translateZ(0);
   }

   
   
   

2. Edit the file C:\Program Files (x86)\ViewON\htmlsources\js\viewon-core-1.2.0.js and the following lines at the end of the file and save it : 
    

   function isChromium() {
     const ua = navigator.userAgent;
   
     const hasWindowChrome = typeof window.chrome !== "undefined";
     console.log("window.chrome exists:", hasWindowChrome);
   
     const hasChromiumUA = ua.includes("Chromium");
     console.log("User-Agent includes 'Chromium':", hasChromiumUA);
   
     const hasChromeUA = ua.includes("Chrome");
     console.log("User-Agent includes 'Chrome':", hasChromeUA);
   
     const hasEdgeUA = ua.includes("Edg");
     console.log("User-Agent includes 'Edg':", hasEdgeUA);
   
     const isFirefox = ua.includes("Firefox");
     console.log("User-Agent includes 'Firefox':", isFirefox);
   
     const isSafari = ua.includes("Safari") && !ua.includes("Chrome") && !ua.includes("Chromium") && !ua.includes("Edg");
     console.log("User-Agent is Safari:", isSafari);
   
     const result =
       hasWindowChrome &&
       (hasChromeUA || hasChromiumUA || hasEdgeUA) &&
       !isFirefox &&
       !isSafari;
   
     console.log("✅ isChromium result:", result);
     return result;
   }
   
     if (isChromium()) {
       document.documentElement.classList.add('is-chromium');
     }

   
   

3. Recompile and resend your project to your Flexy 
   
   

© HMS Networks AB 2025