We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

DiagramComponent renders with black background on safari

Thread ID:

Created:

Updated:

Platform:

Replies:

149624 Dec 3,2019 06:09 PM UTC Feb 26,2020 06:06 AM UTC Angular - EJ 2 19
loading
Tags: Diagram
Mithun
Asked On December 3, 2019 06:09 PM UTC

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 FirefoxIn Safari


 



Shyam G [Syncfusion]
Replied On December 4, 2019 09:35 AM UTC

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
Replied On December 5, 2019 09:14 AM UTC

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 [Syncfusion]
Replied On December 6, 2019 11:51 AM UTC

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.  
  
 
Regards, 
Shyam G 


Mithun
Replied On December 6, 2019 11:53 AM UTC

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 [Syncfusion]
Replied On December 9, 2019 04:56 AM UTC

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 [Syncfusion]
Replied On December 11, 2019 04:26 AM UTC

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.       
 
Regards,  
Shyam G  


Mithun
Replied On December 11, 2019 09:57 AM UTC

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 [Syncfusion]
Replied On December 11, 2019 10:09 AM UTC

Hi Mithun, 
Thanks for your update. 
Regards, 
Shyam G 


Mithun
Replied On December 11, 2019 04:06 PM UTC

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 [Syncfusion]
Replied On December 12, 2019 01:00 PM UTC

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
Replied On December 16, 2019 03:03 PM UTC

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

Thanks,
Mithun

Shyam G [Syncfusion]
Replied On December 17, 2019 12:59 PM UTC

Hi Mithun, 
We will wait to hear from you. 
Regards, 
Shyam G 


Mithun
Replied On December 19, 2019 10:32 AM UTC

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 [Syncfusion]
Replied On December 23, 2019 10:13 AM UTC

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. 


Screenshot: 
 


Regards, 
Shyam G 


Mithun
Replied On January 13, 2020 04:11 PM UTC

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 [Syncfusion]
Replied On January 14, 2020 04:35 PM UTC

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
Replied On February 7, 2020 08:31 AM UTC

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 [Syncfusion]
Replied On February 12, 2020 12:29 AM UTC

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 26th February, 2020. You can track the status of the feature from the below feedback link. 
 
 
Regards, 
Shyam G 


Aravind Ravi [Syncfusion]
Replied On February 26, 2020 06:06 AM UTC

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.          
   
Regards,   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon