I am using OpenSeaDragon to show images on my website. With the desktop browser everything is working correct. Also in device mode with the DevTools from chrome. But when I switch to a real mobile device, I can't change to fullscreen mode.
The view try to expand, the buttons slide to the top, but cancels itself immadiately.
I have build a small Android application with a webview to access the website.
I even don't know, if it is a Android issue or an OpenSeaDragon issue. Any hint what I should check could be helpful.
Thanks in advance
Related
we developed a progressive web app with Angular. It is perfectly installable and executable on mobile devices.
Our requirement is that our customers can pin the PWA on their mobile Android tablets. That is, the user cannot exit the app until he or she enters the pin of the mobile device.
Problem
If the user clicks the back button too often (in browsers this would cause the browser to show the default page as configured), the pinned PWA just shows a blank screen with the app logo. From there on, the user has no chance to do anything. In the end, our customer has to enter the pin and restart the app.
Is there any possibility to change this behavior as this is not happening with native android apps. We also tested the web.dev PWA which has the same behavior, so its not just a problem of our code.
Best regards and thank you in advance.
Eep, that is most certainly a bug in Chrome and Android. I've filed a bug 1174604 with the team and will ask someone to look into it. I'd suggest staring the bug so that you get updates as it gets fixed.
I'm working on a Squarespace website (I can't post the link because of privacy reasons). I'm adding an announcement bar to the site, for covid info. It works fine almost everywhere, except on chrome in android. On that browser, when the page is first loaded, the very top of the text is cut off. Here's an image:
Image of bar cut off. (sorry it isn't a screenshot my phone won't take screenshots in incognito and it was in incognito for unrelated reasons).
Chrome won't allow me to scroll up anymore, which would correct the issue. When I reload the page, it starts off looking the same. However, I now I do have the ability to scroll up.
I've attempted a couple of solutions. Firstly, I've tried to set the z index of the bar higher. But that didn't help. I've also tried to add a script which automatically scrolls the user to the top using window.scrollTo(0, 0); but that also failed.
Sorry I can't show code, it's a Squarespace site. I hope someone can help. Thanks.
Edit: I've done some checking and it happens on computer chrome too when I make the screen small enough, but NOT when I switch "devices" in inspect element. However, the problem isn't there on iphone. Chrome on iphone uses webkit, while on other devices it uses Blink, so I think Blink may be the source of the issue
I am new to Android coding, I have done some coding in the past mainly HTML, Visual Basic, JSON, etc. However, I have successfully created a WebView App using Android Studio. I have it looking exactly how I want but I have 2 problems. I have the WebView app loading my Amazon Fire TV Web App HTML ( https://s3.us-east-2.amazonaws.com/outinthebg/outinthebg_firetv/index.html )
Problem 1- The BIG One
When I click on a video to play it the screen goes black, a white circle spins as if its going to play and then nothing happens. It just keeps spinning. I have tried several variations of code through searching on google but all posts were from 2012 and 2013.
Problem 2- I would love for the app to automatically load in Landscape no matter the orientation of the device, stay in landscape and never be able to go to portrait view.
Any help is greatly appreciated.
I am working on a hybrid application.
My webpages are responsive when i check them in browser inspect window on iphone screen.
But when when i used them in ios, it does not remain responsive anymore.
Any idea about problem and solution?
The same issue is resolved in android by first zooming out the page and the zoom in according to screen size. But it is not working here.
I'm using MediaElement.js to make a responsive web application.
However, I have some issues to make it work on Android Chrome browser (I have a Samsung Galaxy S3).
When I try to open a video, the fullscreen button is misplaced: probably the "toolbar" elements are too big, and the last button (i.e. fullscreen) get placed in the next line.
It happens even in fullscreen mode: the fullscreen button disappears.
The same behaviour can be seen in the demo video on mediaelement.js website too.
Looking at the site on Chrome for Android's DevTools the button has an off by one error.
To learn more on how to do this yourself: https://developers.google.com/chrome-developer-tools/docs/remote-debugging
If you open devtools, you can alter the video scrubber (The bar in the middle) and reduce the size by a pixel and it's fixed.
I'd raise a bug with MediaElement.js - if their CSS is 100% correct then it may be a Chrome specific bug in which case a bug should be raised at crbug.com