Start a new topic

Webview Compatibility

I've got the following problem (see Image):

image

On iOS (iPhone 8, iOS 13.4.1) everything works as expected. The second phone displays the HtmlDrawable on Android (Google Pixel 3a, Android 10, Android System WebView 80.0.3987.162) with background with alpha grey and not white, backdrop-filter: blur also not working.


HtmlDrawable:

var weatherWidget = new AR.HtmlDrawable({
uri: "assets/weather.html"
}, 1, {
translate: {
x: 0.36,
y: 0.5
},
horizontalAnchor: AR.CONST.HORIZONTAL_ANCHOR.RIGHT,
verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
clickThroughEnabled: true,
allowDocumentLocationChanges: false,
onDocumentLocationChanged: function onDocumentLocationChangedFn(uri) {
AR.context.openInBrowser(uri);
},
onError: World.onError
});

weather.html:

<html>
<head>
<meta name="viewport" content="width = 320, user-scalable = 0">
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: 2%; max-height: 250px; width: 250px; overflow: hidden;">
<div style="display: block !important; text-align: center; font-family: sans-serif; overflow: hidden; margin: 15px; max-height: 220px">
<h1 class="title" style="font-size: 25px; margin: 0; margin-bottom: 7.5px;">
Test
</h1>
<mat-divider></mat-divider>
<div class="text" style="margin-top: 7.5px; font-size: 20px; text-align: left;">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</body>
</html>

I've used the Flutter example from Github and just copied those snippets to the 01_ImageTracking_4_HtmlDrawable sample for demonstration.


Could this be a browser (webview) compatibility problem?


Thanks


Hi Daniel,


The HTMLDrawables (especially the layout) is very dependent on the device and the web view used. So it can be that an augmentation is looking perfectly fine on one device and different on another one (especially true for Android). So ideally, we recommend use other Drawables / Augmentations where possible.


Thx and greetings

Nicola

Okay, thanks.

Login or Signup to post a comment