I am trying to use MA-BAR-DISPLAY and MA-POINT-VALUE directives. I have encountered below issues when trying to display content on mobile device browsers (Safari and Chrome)
Below are the code snippets for both directives.

<div class="ma-designer-root" id="c24b3e8e-815f-4ec8-8199-2a1c625684e1" style="width: 1366px; height: 768px; position: relative;">
    <ma-bar-display id="7002c975-e4ac-4cb8-855c-3095c1e99c6e" style="position: absolute; width: 200px; height: 30px; left: 190px; top: 220px;" point-xid="DP_CM72-TC_A1"></ma-bar-display>


<ma-point-value id="b6ad59f9-4b9f-47df-8e18-dff0b475c547" enable-popup="hide" min-event-level="NONE" style="position: absolute; left: 480px; top: 30px; color: rgb(163, 0, 0); background-color: rgb(0, 0, 163); background-size: cover; width: 110px; height: 60px; display: block; font-size: 20px; font-family: &quot;Roboto Condensed&quot;; line-height: normal;" point-xid="DP_CM72-TC_PF1" display-type="rendered" disable-event-popup="false">dfsafsad</ma-point-value>

They both look correct when displayed on a PC/MAC. However, when I tried to view them
on a mobile device, they don't display right. As you can see below: on the left, the bar displays a hatch pattern between the background and foreground color. The MA-POINT-VALUE on the right shown no value at all.
below is how they look on a laptop:

Any help will be much appreciated.

Thanks, Victor