Vue.js click events do not fire when the page has even been slightly scrolled on mobile. This applies to both Chrome and Safari on iPhone. Click events still work if they are clicked and the page isn't moved, but as soon as it is scrolled (even slightly), they cease to work.
I've tried adding cursor: pointer; to my CSS, and I've tried removing different plugins and functions. I've tried running a production build as well. However nothing works.
It seems like a very strange issue, and it appears across two different pages but only on mobile. I haven't been able to find any examples of this happening to anyone else before. I have a lot of code, so difficult to know what to put here also.
Any help would be very much appreciated, thank you!
Related
I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here
I'm facing an issue since few days. When users land to our website they are automatically scrolled down at the bottom of the page.
I just can't provide the website I'm really sorry.
There is no anchor in the URI, no such things related to scroll.
When I was reproducing the behaviour I disabled the JavaScript to eliminate this track. Even with no JS the behaviour is the same.
Almost of our users use Firefox as web browser. I figured out that issue is constantly happening on Firefox instead of Chrome which is happening randomly.
Do you have any idea what could cause that behaviour, event when the JS is disabled ?
If anyone has faced this issue and can be helpful to dig with us do not hesitate !
Thanks again
Im developing a fairly normal web application using Angular2. I've run into an annoying problem: From time to time scrolling up and down does not work.
There is no errors or anything to indicate why this problems occurs. Only solution is to refresh the page, and scrolling will work again. This problem has been observed in all major browsers (Safari, Chrome, and Firefox).
Does anyone know what might be the root of this problem? and on use of this.router.navigate() the navigated page has no scrollbar until i refresh the page manually.
Faced the same issue. my issue was there wee popups which i used, using ngxsmartmodal. After closing needed to remove it which i was not doing.
This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.
I'm working on a web application that requires me to use a modalpopup I recently made within a user control. Everything works as expected, but somehow after a PostBack, and not always, the panel used in the modal flickers (blink) on the screen very briefly.
I have read on dozens of forums saying that I needed to add "display:none;" to the style tag of this panel. This usually "helps", and most of the postbacks don't show the panel, but some do. Seems that the property is being ignored somehow, but I can't find where, how, when.
I have also tried debuging the javascript with firebug, tested all page events and even tried taking a look at the ajax modalpopupextender sourcecode, but couldn't fix this issue.
The browser I HAVE to make this web application work is Mozilla Firefox 3.5.10, that is the current version on the company I work for. This can't be changed due to corporate policies.
Due to quality and user experience issues that arise with this flickering, I leave it as is, so if anyone can help me out I'd appreciate that. I'm also on a rather tight schedule, so any quick help will be appreciated too, as I'm ready to try and test changes on the go.
Please let me know of any doubts or questions.
Thanks in advance.
If your CSS is in an external file, it's possible that the HTML is being loaded and rendered before the CSS is downloaded, causing the flicker. If this is the case, then adding style="display:none" directly to the HTML tag ought to fix it.
The following works for me:
<script type="text/javascript">
window.onbeforeunload = function () {
document.getElementById("PanelDialog").style.display = "none";
}
</script>