DiagramComponent renders with black background on safari

[Mithun]

Hello Syncfusion Team,

Our app uses Syncfusion's DiagramComponent ("@syncfusion/ej2-angular-diagrams": "^17.3.26"). 

Although the DiagramComponent renders correctly on Chrome and Firefox, on Safari the diagram renders with a black background (see screenshots below). 

I'll attempt to set up a stackblitz demo to reproduce this bug.

In the meanwhile, I wanted to check if this is a known issue by any chance?

Thanks,

Mithun

In Chrome and Firefox	In Safari

 

[Shyam G]

Hi Mithun, 

We have rendered our diagram in the safari browser and it is working fine at our end. We are unable to replicate an issue at our end. Could you please share us more details such as machine details such as OS, browser version and the sample. 

Screenshot: 

 

Regards, 

Shyam G 

[Mithun]

So, for some weird reason, I've been unable to create a isolated repro for this issue. 

However my app still exhibits this issue on safari. 

From my internal bug reports, here are the browser/machine details of the people who encountered this issue on safari:

User 1 (safari on mac):

• OS: Mojave: 10.14.5 (18F132)
  
• Graphics Card: Intel Iris Graphics 6100 1536 MB
  
• Hardware: MacBook Pro (Retina, 13-inch, Early 2015)
• Browser: Safari Version 12.1.1 (14607.2.6.1.1)
  

User 2 (safari on mac):

• OS: Catalina: 10.15.1 
• Graphics Card: Intel HD Graphics 4000 1536 MB
  
• Hardware: MacBook Pro (2012)
  
• Browser: Safari Version 13.0.3 (15608.3.10.104)
  

User 3 (all browsers on Ipad)

• IPad PRO, 11 inch
• Version 13.1.2

[Shyam G]

Hi Mithun, 

 

Sorry for the inconvenience. 

 

We have logged a issue report on this. We will fix the issue and the patch for this issue will be available in our volume 4, release which is scheduled to release by the mid of December, 2019. 

 

Now, you can track the status of your request through below feedback link.  

  

Feedback Link: https://www.syncfusion.com/feedback/9499/gridlines-are-black-in-safari-browser-for-angular-sample  

 

Regards, 

Shyam G 

[Mithun]

Thanks Shyam. 

In the meanwhile I'll try to create an isolated/standalone repro for this on stackblitz (so far, my attempts have not been successful, but will keep trying). 

Also please let me know if any additional details or diagnostic logs are needed from my end. 

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

Thanks for your update. 

As promised, we will fix the reported issue and the patch for this issue will be available in our volume 4, release which is scheduled to release by the mid of December, 2019.  

Regards, 

Shyam G 

[Shyam G]

Hi Mithun,  

 

Reported Issue : Gridlines are black in safari browser for Angular sample. 

   

We are glad to announce that our patch release (v17.3.34) is rolled out successfully and In that release, we have added the fix for reported issue.       

 

Please upgrade to the latest version packages to resolve this issue.       

https://www.npmjs.com/package/@syncfusion/ej2-diagrams    

 

Regards,  

Shyam G  

[Mithun]

Thanks Shyam. Just upgraded to 17.3.34 and the issue on safari is now solved!

Thanks for updating the library version.

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

Thanks for your update. 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

We just noticed that when safari is used to export the diagram to PNG or JPG the background is still black.

The diagram component itself renders fine in Safari (since we moved to the updated NPM package 17.3.34). 

For exporting the diagram we use the following components in our custom backend web API (azure app service on Windows):

• "Syncfusion.HtmlToPdfConverter.QtWebKit.Net.Core" Version="17.3.0.14"
• "QtBinaries"

The former has an updated version on nuget, so will installing that. 

What about the qtBinaries though? Does it require an updated version?

[Shyam G]

Hi Mithun, 

 

Could you please update a webkit Qtbinaries and check at your end?.  Meanwhile, we will check in the MAC machine and will update you with more details ASAP. 

 

Regards, 

Shyam G 

[Mithun]

Thanks, I'll try this out by wednesday and report back.

Thanks,

Mithun

[Shyam G]

Hi Mithun, 

We will wait to hear from you. 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

The diagram still renders with black background even after updating the following binaries:

- Syncfusion.HtmlToPdfConverter.QtWebKit.Net.Core (updated to latest nuget package 17.4.0.39)

- QtBinaries (extracted from the latest available 'HTML Converter' installation. Note that the QtBinaries version in this installer is still 5.5.0.0 which is same as previous installations). 

Any ideas on how to resolve this?

[Shyam G]

Hi Mithun, 

We have exported the HTML content in the safari browser and it works fine at our end. Could you please check in the below sample. Also, please replace your base64 data in the below sample and check at your end. Still if you face issues, please share us more details such as modify the below sample. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/diagram-1811023223 

Screenshot: 

 

Regards, 

Shyam G 

[Mithun]

Hi Shyam,

I figured out what is causing the black background while printing on safari; looks like there is a bug in  the .getDiagramContent() method.

Since my diagram app uses SVG nodes. I have to call .getDiagramContent() and send it to a htmlToPdfConverter before I print/export it.

The screenshot below shows the diff between the outputs of .getDiagramContent() on Chrome and Safari. As you can see, the fill for the diagram grid is invalid on chrome, causing the entire diagram to be printed/exported in black color fill.

[Shyam G]

Hi Mithun, 

 

We have fixed the issue of grid lines appears black in the safari browser in the latest version(v17.4.43). Could you please upgrade to the latest version and check at your end? 

 

Regards, 

Shyam G 

[Mithun]

This issue is still occurring with 17.4.47. 

You can try it out on my live app:

1. Open safari
2. Go to http://bit.ly/2uqDCZY and login with github/linkedin
3. A new diagram will automatically be created
4. Add icons, shapes etc to diagram from the icon palette on left.
5. Click on 'export' or 'print' button (top right menu bar)
6. The resulting image will have black background.

Thanks,

- Mithun

[Shyam G]

Hi Mithun, 

 

We have logged “DiagramComponent Export renders with black background on safari” as a defect. The fix for the reported issue will be available in our weekly patch release 26^th February, 2020. You can track the status of the feature from the below feedback link. 

 

Feedback link: https://www.syncfusion.com/feedback/11997/diagramcomponent-export-renders-with-black-background-on-safari 

 

Regards, 

Shyam G 

[Aravind Ravi]

Hi Mithun,   

     

We have fixed the reported issue and included it in our patch release (17.4.51) which is rolled out successfully.    

    

Please upgrade to the latest version packages to resolve this issue.          

https://www.npmjs.com/package/@syncfusion/ej2-diagrams       

   

Regards,