Wikitude
How can we help you today?
Wikitude 4 SnapContainer android versions compatibility
11 CommentsSorted by Oldest First
Hello
I have a little problem, when I try to use the SnapContainer in Android Version 4.0 or under, however this works fine in Android 4.4 (KitKat).
Hi Sergio,
Can you describe your problem a bit more detailed? What exactly is not working? Can you verify that your div element is placed correctly? Maybe your CSS/style changes are not interpreted correctly on older Android versions. We had some problems on the Epson glasses.
Best regards
Andreas
Hi, can you describe your problem and tell us something more about your test device?
We are also releasing a hotfix-version (4.0.2) soon, because of some issues in the snapping feature, so maybe your problem is already solved.
Ok my problem is:
When I scan an image, one video appear and I can wacth the video although move the cellphone outside from the image. This actions works fine with android 4.4
Now when I try to do the same action in android 4.0 - 4.2 this not work, only appear the video but if I move the cellphone outside from the image, the video disappear.
This is my CSS code:
.info {
font-size: large;
position: absolute;
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
background-color: #BBBBBB;
text-align: center;
top: 0;
left: 0;
opacity: 0.7;
display: table;
}
#snapContainer {
width: 50vmax;
height: 50vmax;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25vmax;
margin-left: -25vmax;
background: #FFFFFF;
opacity: .0;
}
Thank you for your feedback, I will check that on some test device and inform you of the result as soon as possible.
I found an explanation for this behaviour, and I'm working on a possible solution.
The problem is that the 'stock' android browser doesn't understand CSS viewport units, like vmin and vmax, so the 'snapContainer' div is not displayed. We will fix that in the sample application in a future release of our SDK, but it's not an SDK-related bug.
Possible workarounds:
- use different units for your container (for example, 'px' with the amount in pixels)
- use a polyfill to implement the missing function. I've tried vminpoly(https://github.com/saabi/vminpoly), and it is working, but it needs some changes to the HTML and CSS. If you want to try that, you have to download the js files from the github page (parser.js, tokenizer.js and vminpoly.js), and include them after the stylesheet link inside the html <head>. Since these scripts do not define vmax, you would also have to change the CSS file and define all sizes based on vmin.
A better solution, defining the <div> dimensions using '%'.
The SDK samples work if you change the snapContainer css to the following:
#snapContainer {
width: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25%;
margin-left: -25%;
background: #FFFFFF;
opacity: .0;
}
#snapContainer:before {
content:"";
display: block;
padding-top: 100%;
}
This will be probably implemented in the next version of our sample application.
Update: this is a temporary solution, and only works if the device is in portrait mode, when the device is rotated into landscaepe mode, the <div> gets bigger. This is just a first step, not the definitive solution.
Thanks Gabriele it's working now.
Hi Gabriele!
Thank you very much for posting work around. I have also tried these solutions to see if they fix the problem and both of them work only when device is on Portrait mode. Just like you have said in your post. Do you have a work around for Landscape mode already? Can you share it with us before you release a new version of SDK. It kind of urgent fix since I believe since Android devices are so many and KIT KAT is only on 20.9% devices.
Thank you!
Sergey
A solution for the landscape mode: append the following lines to the css file
@media (orientation: landscape) {
#snapContainer {
width: 30%;
margin-top: -15%;
margin-left: -15%;
background: #FFFFFF;
}
}
Hi Gabriele!
Thank you for sharing the work around for landscape. It works well!
Seregy
© 2023 Wikitude, a Qualcomm company
Bodoquezorrilla