Skip to Content (Press Enter)
2022-04-05 07-17-26
TitHow Tan
82Views
7Comments
Icon Image not show up in Safari (Iphone Only)
Question
Reactive
Application Type
Reactive

Hi , I have a display issue when we use icon (not image) for reactive application. As the attachment shown, the footer has 5 icons image but all didn't display in Safari but they work fine in Chrome. The workaround is we have to change all icon to images. If any one knows why this is only happened in Safari would be helpful. Thanks.


Use Icon logo in reactive application


Application images that didn't show properly 


Using Images instead


d6e8e6bf-4c83-446d-8af8-b7543fbbb564.png
0
0
22 Sep 2022
Copy Link
2022-09-05 08-23-51
Naveen N

@TitHow Tan  It will work, not sure why you are facing this issue , if you attach the url or oml , it will be more clear to give you a solution.

0
0
22 Sep 2022
Copy Link
2022-04-05 07-17-26
TitHow Tan

Unfortunately, we have use image to workaround this issue. The URL might not showing the error. Is normal setup as below, seriously we also have no clue. 

image

0
0
22 Sep 2022
Copy Link
2022-09-05 08-23-51
Naveen N

Replying to TitHow Tan's comment on 22 Sep 2022 11:32:25

 please provide url : https://naveen-mahe.outsystemscloud.com/Customise_Sidebar/Home?_ts=637994580198265381
something like this to check it from my end , there might be a chances of some css issues it can be identified in the browsers.

0
0
22 Sep 2022
Copy Link
2022-04-05 07-17-26
TitHow Tan

Hi,

Due to customer NDA, i can't share the application before it launch. However I share the script below hope that you can help. Thanks.



<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <meta name="format-detection" content="telephone=no" />

        <script type='text/javascript'>window.OutSystemsApp = { basePath: '/CancerNavigator_EU/' };</script>

       

       

        <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1" />

<script type="text/javascript">

(function () {

    function appendMetaTagAttributes(metaTag, attribute, values) {

        var elem = document.querySelector("meta[name=" + metaTag + "]");



        if (elem) {

            var attrContent = elem.getAttribute(attribute);

            elem.setAttribute(attribute, (attrContent ? attrContent + "," : "") + values.join(","));

        }

    }



    if (navigator && /OutSystemsApp/i.test(navigator.userAgent)) {

        // If this app is running on the native shell, we want to disable the zoom

        appendMetaTagAttributes("viewport", "content", ["user-scalable=no", "minimum-scale=1.0"]);

    }

})();</script>



        <script type="text/javascript" src="scripts/OutSystemsManifestLoader.js?Uno7DkMuu4+3RKfSExTIUg"></script>

<script type="text/javascript" src="scripts/OutSystems.js?k36mRfZ6s8pV7kazcs1cPg"></script>

<script type="text/javascript" src="scripts/OutSystemsReactView.js?M3_bezEn9B36qY+psDBUKg"></script>

<script type="text/javascript" src="scripts/cordova.js?7KqI9_oL9hClomz1RdzTqg"></script>

<script type="text/javascript" src="scripts/Debugger.js?xZCttWvnbj2qYy3gCvPzNw"></script>

<script type="text/javascript" src="scripts/CancerNavigator_EU.appDefinition.js?x1z48w7tIsTgOlqhki_oYg"></script>

<script type="text/javascript" src="scripts/OutSystemsReactWidgets.js?G0dYFyICODS+9VujGw1MjA"></script>

<link type="text/css" rel="stylesheet" href="css/_Basic.css?EqGzAe81QbZLXJyfY3oLwA"></link>



        <script type="text/javascript">OSManifestLoader.indexVersionToken = "x7Ljf8xi8uYQaG4svSF4Vg";

</script>

    </head>

    <body>

        <div id="reactContainer"></div>

        <noscript><span>JavaScript is required</span></noscript>



        <script type="text/javascript" src="scripts/CancerNavigator_EU.index.js?iUch1kztbkgQEbr8u1LqcQ"></script>



    </body>

</html>
0
0
23 Sep 2022
Copy Link
2022-09-05 08-23-51
Naveen N

@TitHow Tan It seems like your icons are not loaded at the safari. (may be a loading issue)


Inspect and check your application in the browser 


Whether you can able to see the icons,if not then there is an issue in loading, if yes take a screenshot of the styles what is applying in the browser for ex, like this

and 



check this link in your safari browser, same reactive application with few icons , let me know if you are facing the same issue here also. 
https://naveen-mahe.outsystemscloud.com/Reactive_app/Home?_ts=637995292348184987

0
0
23 Sep 2022
Copy Link
2022-04-05 07-17-26
TitHow Tan
2022-09-05 08-23-51
Naveen N

Replying to TitHow Tan's comment on 28 Sep 2022 02:01:13

Ok fine, follow the above instructions and send me some screenshots , i will check what is missing ,first check it is loading or not and if yes send me the screenshot for the styles.

0
0
28 Sep 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.