Edit:
This is for a hybrid mobile app made with Ionic 4.
On smaller devices (even smaller than the image attached) the inputs are covered by the keyboard on Android and iOS. Lets focus on android for this question.
At this stage for this project I do not want to use stripe elements.
I have looked for ages on this and even contacted stripe support but have found no solution.
I have attached an image of the problem (it is worse on smaller phones) and also an image of how it looks if you open it in chrome on a mobile browser.
My options now seem to be:
1) Hack the css
2) Try and figure out how to get it to display like it does in the mobile browser (2nd image) as this is much more responsive to device size.
Legacy Checkout should always open up a new page/tab and fill the screen like in your 2nd screenshot. The only exception is if the page has been configured to be in "web app" mode.
Do you happen to have the following metatag on your site?
<meta name="apple-mobile-web-app-capable" content="yes">
If so, if you remove it then Checkout should behave as expected.
Another solution is to use the new Checkout, which always opens up a new tab: https://stripe.com/docs/payments/checkout/client
Related
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'm building a website in WordPress and have bought the following theme: http://my.studiopress.com/themes/sixteen-nine/#demo-full .
This is currently my site
http://jiri.tourdog.nl/
When viewed on a mobile device, one is supposed to see a menu icon that one can click on to reveal a drop-down. When I visit the original theme-demo on my mobile device the icon shows like it's supposed to. However, when I check my own site I can't see the icon (although the part is press-able and shows the drop-down). On my laptop I can resize my screen and it'll also show.
So this leads me to believe this is not a WordPress issue nor is it an issue inside the theme (the css is exactly the same as the demo).
What could it be?
Summary: Icon doesn't show on my mobile device, does show on desktop, and am also able to see the original theme demo's icon on my mobile device.
All!
I have a perplexing problem that occurs only on some specific phones-- but they're the phones that my customer wants the app written for, so I need to deliver. :-/ The site that I am working on consists of fourteen jQuery mobile "pages", and two of them are exhibiting the following behavior:
I have an issue where pages being loaded from the browser's cache-- whether by pressing the browser's "back button" or simply reloading a page that has been previously rendered-- is broken:
While the page renders correctly, the bottom of the page is either "cut off" and can't be scrolled to, or a medium amount of "new" blank content is inserted at the bottom of the page.
When the latter occurs, the UI controls are "shifted" by the length of the new blank content compared to where the user was tapping: If an inch was "inserted" when the page is displayed for the second time, tapping on the screen triggers a click event in the location an inch "higher" on the page than where my finger touched the screen.
I will note that this problem appears to occur only on pages that have enough content to scroll off screen; pages that have small amounts of content do not suffer this problem. There is no dynamic content being added to these pages.
It appears that once a page is created and then a different page is displayed, something breaks in the DOM when the previously-created page is redisplayed.
The mobile sites run perfectly in Chrome and Firefox on a PC; they manifest themselves only on certain Android phones. One phone model that is giving me particular headaches is a Samsung SGH-I437P running Android 4.1.2.
I'm using the latest versions of jQuery-- rev 1.9.1 of jQuery, and 1.3.2 of jQuery mobile.
What I think I need to do is to tell jQuery to completely rebuild the page, but am unsure if this is even feasible, as the since the page has already been loaded into the DOM with all the jQuery mobile "embellishments"-- so there's no "bare-bones non-jQuery-mobile" HTML to rebuild the page with.
However, searching for page rebuilding / reloading hasn't turned up any concrete hits-- there was a way to do this with older versions of jQuery Mobile, but this does not work for the latest version.
Has anyone else experienced this behavior and know how to counteract it? My team of two have been focused on this for weeks to no avail.
I have a mobile web page which includes an input element of type 'file', to allow users to upload image files to a server. The page works fine on iOS, and on a Nexus 4 (Android 4.2.1) in the Chrome Browser.
When I use a Samsung S3 (Android 4.0.4) with the default browser clicking on the 'Choose file' button opens the image selection dialog as expected, however after I choose an image and close the dialog the web page gets refreshed, so I lose the image that was selected. Has anyone else seen this behaviour? Any suggestions for a workaround?
The input element that I'm using is fairly standard, and looks like this:
<input id="addPhoto" type="file" accept="image/*"/>
Even without the 'accept' attribute I get the same problem.
Have a look a this issue:
https://code.google.com/p/android/issues/detail?id=53088
Basically, what seems to be happening is this:
Android does not have enough memory available for the file-chooser or camera app.
It frees up memory by closing the browser
After the file chooser/camera is closed the browser is opened again, triggering a page refresh, which renders the whole file choosing exercise useless.
It seems to me that this is beyond the control of any browser based solution but I would love to be proven wrong on this assumption.
I'm having the same problem on a phone with Andriod 2.3.6. One of my colleagues does not have the problem on his phone (can't recall what that is running). He suggested it may be a memory issue. If the phone doesn't have enough available memory, the browser might actually be forced to reload the page after selecting the picture, which defeats the purpose. I have not yet been able to confirm that this is the problem, but my phone does have considerably less available memory than his.
You could try this JQuery Method: http://blueimp.github.com/jQuery-File-Upload/
Uploadify also looks promising: http://www.uploadify.com/
Here's a demo of it: http://www.uploadify.com/demos/
I think the problem is not your code, but the default Android browser you are using.
I am building a page for Android, and it uses CSS. The phone I am testing on right now is ICS. I've found that in the native browser, when i click on a div with a higher z-index than the page I actually activate the elements behind the divs. This means that I inadvertently tap ads and links that take me off the page.
This does not happen on the ICS chrome browser though. Does anyone have an idea of what I can do to remedy this so that my div is what gets tapped?
Thanks,