Flowchart misdrawn on Android Mobile

[prtuson]

Hello,
I have been using mermaid for going on 10 years now and am very impressed with it. However, I am now having a problem with it displaying on the mobile phone within an app that I develop called iShine. This uses the flowchart to dynamically show paths to suitable qualifications for a selected career.
I am using Mermaid 8.8.4. The mobile app is a hybrid app and is developed using Ionic, Cordova and Angular, again the latest versions.
I have flowcharts working fine on the online version of the app and the emulation of the mobile app running in the web browser, I have tried both Firefox and Chromium.
I have included and example of what it looks like on the online/emulated and the actual mobile phone.
On the mobile phone version, the rectangle (w 64, h 42) is smaller that the foreign object (w 132, h 66) containing the text. Hence the text is centred within its border but this is larger and offset from the drawn rectangle. I also had to scale the text down from the online/emulated to get it to look like this.
I initialise mermaid on startup with code like this:
mermaid.initialize({
startOnLoad: false,
cloneCssStyles: false,
securityLevel: 'loose',
leftMargin: 0,
themeCSS: '.label{display:block; margin:0 auto; text-align:center;line-height:1;}\nlabel{color:#8f9321; display:block; font-weight:bold; margin-bottom:0;font-size:1.0rem;}\n.employ label{margin-bottom:0}\nsection{font-weight:bold;font-size:1.0rem;}\n.label span p:last-child{margin-bottom:0}\n.label span {font-size:1.0rem;}',
flowchart: { useMaxWidth:true, htmlLabels:true }
});
Then when the page is viewed, I render the flowchart with:
if (this.careerInfo.route) {
mermaid.render("routeGraph", this.careerInfo.route, (svgCode) => {
this.svgCode = this._sanitizer.bypassSecurityTrustHtml(svgCode);
});
}
I went back to 8.8.0 but no better. I have tried changing the CSS.
Does anyone know what I am missing here?
What can I do to improve the viewed image?
Is it an issue with Mermaid?
All help would be very welcome.

[prtuson]

I think that I have worked out what the cause of this problem is.

I tried looking at an old version of the app and that had the same problem, this was using Mermaid version 8.5.2 and used to work. So I concluded that it is not a problem within Mermaid itself.

We have both a web version and an app version of the app. So I tried opening the web version on the variety of web browsers on my android mobile phone. I found the same problem occurring with Google Chrome. The version on my phone is 87.0.4280.101 and was last updated on 7th Dec. Other browsers worked OK, i.e. the results were as expected.

On my computer, Chromium is at version 83 and works fine for both browsing and in emulation mode.

I have emailed google, including the pictures, as the bug appears to be in google chrome.

Has anyone else experienced the same problems and if so how do you work around it?

[heddxh]

I think that I have worked out what the cause of this problem is.

I tried looking at an old version of the app and that had the same problem, this was using Mermaid version 8.5.2 and used to work. So I concluded that it is not a problem within Mermaid itself.

We have both a web version and an app version of the app. So I tried opening the web version on the variety of web browsers on my android mobile phone. I found the same problem occurring with Google Chrome. The version on my phone is 87.0.4280.101 and was last updated on 7th Dec. Other browsers worked OK, i.e. the results were as expected.

On my computer, Chromium is at version 83 and works fine for both browsing and in emulation mode.

I have emailed google, including the pictures, as the bug appears to be in google chrome.

Has anyone else experienced the same problems and if so how do you work around it?

I meet the problem on my android 9,too.

• in chrome,all words are out of the border
• in another chromiun broswer called kiwi,it won't happen
• in some app(not pwa)like joplin,epsilon notes,it happen again
  It worry me o lot ! is any one have sulution ?

[prtuson]

I have emailed google describing the problem but with no response. It works fine on iOS, i.e. iPhone.

I also ask, does anyone have a solution? If not, I will have to think of another simple way of describing the flow without the aid of a neat diagram on the mobile.

[jgreywolf]

Since this is due to an issue within Chrome, I am going to go ahead and close this.