Mashup api - Visualization not rendering on Safari

[anandarodrigues]

I am using Mashup api to render Qlik sense visualizations. It works as expected on Chrome. However it does not load on Safari.

Filters and header titles appear, but none of the charts render on Safari browser.

Details: I am on Mac OS, using Safari version 16.1

[alex_colombo]

Hi @anandarodrigues , do you have any errors in browser developer console?
Are you using capability APIs correct? Or are you using iframes?

Mashup is deployed on Qlik Sense server?

Are you using Qlik Sense Enterprise or SaaS?

[anandarodrigues]

Hi, I have the following errors (image attached) on console, but only for
some dashboards. Other dashboards don't display any error in the console,
but still don't load the charts.
Yes I am using Capacilities api. We are running Qlik sense Enterprise off a
server.

[slh2QlikUser]

Hi @alex_colombo I work with @anandarodrigues  attached is the browser error that we are getting.  We are currently using capabilities API as per the documentation recommended and do not notice the issue in Firefox and  Chrome.  We are using Qlik Sense enterprise's August 2022 release.  Mashup is deployed on to an external web application that we manage. 

 

[alex_colombo]

Hi @anandarodrigues  @slh2QlikUser you should check for me

• If web socket is correctly created in network tab. If so, please send me a screenshot of the firsts web socket messages. I'd like to check if you are correctly authenticated.
• If Qlik cookie is present in your session. You should have a cookie like X-Qlik-something. Safari should block 3rd-party cookies for cross-site domain, and you are hosting mashup in hostname A and call Qlik Sense server on hostname B. This could be the root cause I guess.
• Check in network tab if you have any errors on the calls

[anandarodrigues]

Thank you so much for your response! This is the screenshot from the socket
connection. As you can see it says Websocket is connected.
[image: image.png]
We previously had the issue with the cross-domain, but that is fixed. We
are using the same domain, and we are able to get filters and other
elements from the mashup api, only the charts are the ones not being
rendered in Safari.

[alex_colombo]

Can't see the image- Please upload it again.

Did you check second and third point mentioned above?

Can you send me a screenshot of inspection of your html where you are injecting Qlik charts? I guess that you have div container with an ID, and then in JS you are getting Qlik visualizations and point to that ID for rendering.

[anandarodrigues2]

Sorry, I have attached the network screen shot again - You can see things like "Learner name" on the left are qlik filters rendered through the same mashup api.

About the elements, yes we have elements with the ID then we use `qlikApp.getObject()` To render the objects.

Here is a code snippet:

// For each visualization object we call the API's getObject method

visualizationObject.forEach(({ name }) => {

qlikApp.getObject(name, name);

});

Then on our html(jsx - we use react) we use the following for each object:

<div

id={name}

key={name}

></div>

[anandarodrigues · Accepted solution]

Thank you everyone who posted in this thread. It turns out the problem wasn't related to Qlik. It was a styling problem that was happening only with safari browser (basically a broken css that other browsers were ignoring, but Safari didn't). That caused the visualizations to have no display or height. But they were, indeed being rendered.

This is not a problem with Qlik, so I'll mark it as solved and close the thread. Thank you all again.