Been stuck on a nasty bug for way too long. Hoping someone out there has experienced this already. The issue is only prevalent on IOS 12+ (Iphones for sure, specifically IPhone 5 & 7 - haven't tested ipad) - Chrome or Safari. Androids work fine, all desktop browsers work fine.
Our app is using the Angular core with Angular Material & UI Router.
How to reproduce the issue:
1) click item as seen in picture
2) Arriving at the item detail page, click on back to results or browser back button:
3) The following is end result (a page where none of the links or buttons work, including ui-sref, regular links, ng-clicks):
Note that I double checked if any elements were in the way - there are not. Also, manually triggering a click via JS in the console allows it to work as intended. Super strange...
Also note that refreshing the page once it breaks allows it to function normally again. Also refreshing once in the details and then pressing back allows it to function normally.
There are no console warnings or errors.
Ideas?
Related
This is my website.
I'm currently working on multi-choice filters, or rather on resetting them. There is no problem on PC.
Click the X button and it clears the filter
But the same simple thing doesn't work like this on mobile devices. I don't understand why.
You need to click an area below the X button, well below, to dismiss the filter.
This is how you need to click to make it work
Also, I just realized that when clicking like this there is an error in the console.
Error in the console after successful dismissing
I'm testing the mobile behavior in Opera (PC version, last update) using the Inspector with mobile simulation; the device is irrelevant. You can try it too.
The same behavior occurs on an actual android, both in Chrome and Opera.
Side notes!
If you activate the dropdown search in any multichoice field, while it's visible, the close buttons work perfectly well and precisely on mobiles. (Although the behavior of this dropdown panel is weird too. It does not always drops down when focusing on a field, as it does on PC.)
When I tried to locate the close button using the console and Jquery and then applied .click(), it worked. So I guess the problem doesn't lie in JS.
If you want to test it on a phone choose the Desktop site. On the mobile view, though, another peculiar thing occurs-the blue X button to the right of the field doesn't work.
PS. I've been wracking my brains for 3 hours to solve this mystery, yet no result. Please help!
The culprit was the "chosen" plugin. Don't use this crappy plugin. They simply don't support mobile devices and have tons of bugs.
I switched to Select2 and everything is great.
I've stuck ReCaptcha 3 in a polymer 2 app and it works great, except that in Safari, when I try to get the token, the call to grecaptcha.execute stalls. Every. Single. Time.
I've tried implementing different ways, sticking all captcha stuff straight in the index to keep it all out of the shadow dom, wrapping everything up in a component, automatically rendering vs explicit. It just doesn't work in Safari.
Also, probably doesn't mean much, but in my testing, some devices consistently just lock up the browser and never move on, while others will always un-freeze after a few minutes.
I've also seen similar behavior on our sites using the v2 invisible ReCaptcha, except that with that one iOS Safari crashes on all devices and Mac doesn't have any issue.
I recently upgraded Sitefinity from 9 to 10. After the upgrade I am not able to edit the content of content blocks on the pages. This only happens with Chrome. Everything seems to work just fine in IE and FireFox. After clicking "Edit" on any of the Content type controls (Content block, image, video, ect) the white loading box shows and then just goes to an all white window the the x to close it out. Any of our custom widgets work fine. There are no Javascript errors showing in the console. Has anyone seen this type of behavior and how is it fixable?
** Note ** The MVC Content types do seem to work. It appears that it's just the regular Content types that do not seem to work correctly.
Have you zoomed in or out your Chrome browser?
I've seen this issue with Chrome and WebForms widget designers.
Just try to zoom in and out the browser while the widget designer is open - you should start seeing the contents of the designer.
I am having an issue where dynamically-created links are working on all devices I have tested (in all desktop browsers, on my iPhone, on my iPad, and on my Samsung Galaxy Tablets Chrome Browser), but will not work when clicked on Android phones (I've tested on three Android phones running Chrome, sorry don't have the Chrome versions, but one phone is really new and the others are 1-2 years old at most).
I am dynamically-creating the links to add items to a cart (inside of a larger dynamically-created entity) in a loop.
The link in question is constructed basically like this:
var itemHTML = "";
...
itemHtml += '...<span>\n'
...
Where gAddLink is just a standard URL. I am then inserting that itemHTML (in addition to other HTML) onto the page dynamically using document.write().
Since this is being dynamically created on page load (for reasons out of scope for this question, but it is a necessity), I know I have to have a click handler set up as so:
$('.elementToInsertTo').on('click', '.add2CartLink', function() { ... });
Where '.elementToInsertTo' is the parent element that is NOT dynamically created, and is present on the page at page load. There are multiple of these parents, hence why I can't use an element ID. Don't think it makes a difference though.
Again, I can confirm that the function call in this click listener works everywhere except Android phones (as far as I can tell). Any idea why this may be? I've read StackOverflow pages all day, but nothing seems related to this. I've read a bunch about JS closures (which may still be the issue) and the like, but none of that seems to be relevant since the link click listener is working on most all devices I have tested on (even the Android tablet's Chrome browser, which is the part that really is confusing to me).
If you happen to have seen this issue before or have any idea why this may be happening, please write it out before reading the next part, so as not to confuse or bias you.
Ok, now to the part that is even more mind-boggling, though I hope this only helps figure this out and doesn't confuse the situation.. I connected one of the phones to my computer with a USB and did some remote debugging using Chrome developer tools as described here (https://developers.google.com/chrome-developer-tools/docs/remote-debugging). I could confirm there that the click listeners were not working (they weren't being triggered)... (and now here comes the crazy part) UNTIL I did some element inspection on the link (i.e. the link was highlighted on my phone as I was inspecting the DOM-element in my browser, again using Chrome dev tools) and then clicked the link. This made it so that the click listener worked! What?? To debug further, if I inspected any of the DOM elements on the page and clicked the link, the click listener worked. If I changed tabs away from the dev tools tab, or simply stopped inspecting the DOM elements in Chrome Dev tools, the link click listener no longer worked. I really don't know what to make of this, but I'm hoping this part of information narrows down what may be going on with the Android phones and the click listeners.
Happy to try to provide any other info I can, though I am without the Android phone for testing at the moment.
Thanks!
Tap was still needed (thanks for both suggestions), but the issue was with a 3rd party JS library stopPropogation() call. Apparently this only happened on Android phones, but regardless, after removing the line, the click (on computers) and tap (on mobile) now works everywhere. Thanks!
I have a simple one page webapp that follows the the following flow of execution
Main -> AJAX Content -> Main
The user starts with the main screen, enters some input data and presses a button. This starts the AJAX content which is essentially a collection several different steps in a sequential manner. After completing all the steps, the user starts back on the main screen.
I want to handle what happens when the user presses the back button in the "AJAX Content" state. This is the state diagram I wanted-
Main (Push Main) -> AJAX Content (Pop Main)-> Main
So, when the user is in AJAX state, on back button press, user will be taken back to main screen. After completing the activity and returning to the main screen, the back button takes the user away from the site.
NOTE: All the items are just a single HTML page. I used the words "Main" and "AJAX Content" to illustrate the different screens that the user will see.
I tried implementing this functionality using Really Simple History, PathJS and jQuery BBQ. None of them was successful. I need a simple way to push and pop items onto the navigation stack and react to them when the user uses the back button.
I mostly develop for mobile platforms, where doing all this is really easy. I can't figure out how to do this for a web app. Snippets of code will be highly appreciated.
Would manually pushing history work for you? Something in the likes of:
window.history.pushState(stateObj, "Title", "URL");
It also supports some methods for navigation and the thing you should appreciate the most:
window.onpopstate = eventHandlerRef;
There's a very nice article right here: https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
Now this is all good but somewhat dependent on your target platforms sadly - The support for the pushState method and the event is not too broad - http://caniuse.com/#feat=history - and both sites link to the History.js polyfill which has support pretty much covered. From https://github.com/browserstate/history.js :
HTML5 Browsers
Firefox 4+
Chrome 8+
Opera 11.5
Safari 5.0+
Safari iOS 4.3+
HTML4 Browsers
IE 6, 7, 8, 9
Firefox 3
Opera 10, 11.0
Safari 4
Safari iOS 4.2, 4.1, 4.0, 3.2