PNG export from an SVG string via painting on the canvas only works after several attempts in Safari browser.

I have a mind mapping app that has been running well on Android for a few years now. I have been trying to publish it for iOS and MacOS for some time now. On iOS (as an app) and MacOS (in the browser for testing) I have a problem with the export. The app is a project in Angular, Cordova, Typescript. The problem only occurs in the Safari browser, which is also used in the Cordova version for iOS. I was able to test it on my Mac and an iPhone. The error does not occur on the Mac in Chrome.

The Problem

If I export a mind map that contains images as an image (.png), the images of the nodes are not displayed in the exports. Everything else in the map is exported correctly, only the images are missing. Only when I export the map three times are the images present in the export. If I add a new image and export it again, the image is only visible in the exported image after 3 exports. It is interesting that the export as SVG, which I also offer, contains the images of the nodes. So the SVG string that I create has all the necessary information.

The base

The mind map consists of various things. HTML and CSS for the frames, lines etc... The images of the nodes are saved as Base64 and each node is in a Foreign Object.

Example of the SVG export

Mindmap with 2 nodes and the Base64 characters of the node images have been replaced with ***.

__

This is how I export the .png file.

I can view all this content in the map view of the app. When exporting to an image, I take this information, turn it into an SVG, have the browser draw it on the canvas and then output it as a graphic. Something must be going wrong at this point.

private exportAsImage(
    mindMap: MindMap,
    scale?: number,
    type: string = "png"
  ): Observable<any> {
    return new Observable(o => {
      this.progress.start(this.progress.PROGRESS_MAJOR);
      this.mmpMap.export(this.mapVizService.getExportClassList(mindMap),
      (svgStr: string) => {
        this.exportService.imageFromSVGString(svgStr, type, scale).pipe(
          switchMap(img =>
            of(
              Utils.dataURItoFileObject(
                img.dataUri,
                `${Utils.sanitizeFilename(mindMap.title)}.${type}`
              )
            )
          ),
          switchMap((fileObject: FileObject) =>
            this.mapsService.saveAsTemp(fileObject, true, {
              message: this.translate.instant("mdz.mindmap.saveas.message"),
              // subject: this.translate.instant("mdz.mindmap.saveas.subject"),
              subject: fileObject.name,
              url: `www.myURL.com`
            }, true)
          )
        ).subscribe(() => {
          this.progress.stop(this.progress.PROGRESS_MAJOR);
          o.next();
          o.complete();
        }, err => {
          this.progress.stop(this.progress.PROGRESS_MAJOR);
          o.error(err);
          o.complete();
        });
      })
       });
  }

What I have already tried.

I have already tested various things such as time delays etc..., none of which change anything. It seems to me that it's a combination of the caching and the order or speed at which the images are loaded. Only the speed can't be, because built-in delays don't change anything.

My guess

But it must have something to do with Safari because on the Mac in Chrome it runs without problems... Maybe it can't handle so many base64 images or it exports faster than it renders? Whereby the SVG export contains all the information and when I open the SVG, all the content is also displayed in the browser in seconds. So something must happen when painting on the canvas and outputting as an image.

It doesn't really make sense, I'm really at the end of my ideas. What can you do?

I really hope you can help me. A mind mapping app without image export makes little sense. And since the app otherwise works great, I'm really getting desperate. :(

Thanks a lot! Rob