We have a website that when you click on the text it reads to you what is displayed. This works 100% for computers but on mobile devices it will not play the audio.
I have looked around the web but everything is pointing to Jquery using touchstart. We tried doing this but it then breaks on computers.
Anyone run into issues like this? If so, how did you fix it?
I think this was an issue with older versions of react. I haven't had the problem recently. In the past, I solved it by adding cursor: pointer; to the CSS of the element. It had something to do with events not firing on elements that aren't usually 'clickable'.
Related
I have a timer in Javascript that fires once per second to update some text in the page (HTML5) like this:
document.getElementById('CountDown').innerHTML = "some string";
This works fine except that if this code runs while the user is dragging a scrollbar handle the drag is aborted. This is a very annoying user interface behavior which I have not been able to resolve.
If I comment out the line in the timer event then the scrollbar works normally.
Note: It only happens on Chrome, not on Firefox or Opera.
Any idea how to address this?
The smooth scrolling is a very important and effective function to enhance the user experience, it looks like there are several cases like yours concerning the smooth scroll in the chrome browser, and how it's not working properly, but the issues are in must of time related with the older version, like:
https://github.com/simov/simplr-smoothscroll/issues/27
https://github.com/mathiasbynens/jquery-smooth-scrolling/issues/1
https://github.com/iamdustan/smoothscroll/issues/28
You could try the following rules in your CSS:
html, body {
overflow: hidden,
height: 100%
}
And for your container you could attach the following rules:
{
overflow: auto;
height: 100%
}
Instead, since the code work in the other browser means that your code is valid, so just make sure you're using one of the latest versions, clear your cache & give it a try.
Probably not the answer you want to hear but I had this problem several months ago, there are several known bugs with the smooth scrolling feature of chrome when javascript is updating the DOM.
The newer versions of Chrome seem to handle this much better. I did a quick test where the code is similar to yours on the latest version of Chrome, and there were no problems.
It seems unlikely that there is an error in your code if it is working well in other browsers. Might be best suggesting users to ensure Chrome is fully updated for the best experience on the website or to use another browser.
Seems to be OK now - after release of Chrome 68.0.3440
I have an issue with Firefox. In both responsive mode and Firefox Mobile to be accurate.
The touch scrolling isn't working on my website. (But the scroll with the mouse is working on Responsive mode)
It works fine on Chrome mobile & Safari mobile.
I checked online and I already tried the dom.w3c_touch_events.enabled set to 1. It was actually set to 1 by default.
I think it's an issue on the JS/CSS side but I can't see where.
I use SASS and Pleeease to compile it and it's a React app compiled with webpack.
Also I use the method fetch to call my webservices if it can have any influence but I doubt it. (and have a polyfill for it)
I tried to nuke totally my CSS and it still didn't work.
Happy to share URL if people want to see the actual problem. I just don't want to be seen as a spam. Also I will share a test server and not the live one. (problem is the same anyway)
Found the (stupid) solution and posting it as it might be helpful to someone.
I had a overflow:hidden; added by mistake in html, body { into my SASS.
For some reason the responsive mode in Firefox is still not working (bug? cache? I don't know...). But once I tried again on my Firefox mobile it was gone.
Looks like Chrome and Safari are ignoring this CSS but not Firefox.
For the record I am on last versions on all my browsers.
I have a clickable span that works perfectly on Android and desktop etc, but it does not work on iphones.
$('#spanname').on("click", function() {
/* do something */
});
I have tried touchstart, touchend and added hover pointers as per some other suggestions for this weird behaviour after researching, but nothing works.
Any ideas? If not, I guess I'll have to do away with the span and use a div.
(the reason I'm using a span is because I am using a large ยป instead of an arrow image).
Try to add an empty onclick attribute to the span or apply cursor: pointer to the element in the style sheet. ;)
More information here
The answer is check the silly and obvious things first. The device I was checking my updates on was actually pulling down an older iteration of the site and therefore wasn't showing my updates. The procedures did work, but only when I made sure I was actually looking at the correct version.
Apologies to anyone that took the time to look and also thank you.
Problem: A div with visibility:visible inside a parent div with position:fixed and visibility:hidden causes rendering problems in Google Chrome. Images and examples can be found here.
A week ago you could just add the -webkit-transform:translateZ(0) to the parent div and bug solved. But it isn't working anymore:
Without -webkit-transform
With the hack.
Both are bugged.
So, is there any solution? When you resize the window, it repaints the divs, also when you open the developer tools the bug disappears.
So I've been trying to force a repaint with javascript (jQuery):
jQuery(window).scroll( function() {
jQuery("#parentDiv").addClass("nothing");
jQuery("#parentDiv").removeClass("nothing");
});
And it sometimes works (when a textfield is displayed inside the inner div). Really weird. Also tried hiding and displaying the div, adding css properties (fixed, bottom:0...)
But nothing works fine.
Any ideas?
EDIT2: Seems like it only happens to me: 2 friends, using windows and the latest version (17.0.963.79) don't see the bug in the second link. But I still see it. I've reinstalled chrome under windows, and the bug is still there.
I also have cleared the cache, but nothing changes. Am I the only one????
from my own experience when working with scroll(), all form-elements behave strangely, or do not function anymore.
You solution -webkit-transform:translateZ(0) will fix it for webkit browsers, but all others browsers will trow a translated layer above all form-elements, result is that form-element are not accessible anymore.
scroll() is a great solution for just plain info (text- images), not for forms.
Can anyone help me figure out why this page causes Android browsers to crash?
http://thewellcommunity.org
All sub-pages seem to work just fine, but when I load the home page on an Android, the browser app just closes without any warning or error messages. I've tried this on 3 Android phones and on a Kindle Fire.
When I completely disable JavaScript in the browser on the phone, the page loads successfully. Unfortunately this is a live website, so I'd prefer to save disabling chunks of JavaScript on the server side as a last resort.
On a side note, Opera Mini, Opera Mobile and Firefox on an Android phone do not crash, but Dolphin, Miren and the stock browser do.
UPDATE: It appears that I spoke too soon when I said this was fixed. I was able to reduce how often the browser crashes, but it still does occasionally crash when the page is loaded. :(
UPDATE #2: It now appears that the crash may be CSS related. After spending weeks enabling and disabling various JavaScript snippits, I tried disabling the stylesheet, and now I can't get it to crash.
Anyone know of an Android CSS bug that might be causing this? My guess is that it's related to some CSS that only gets accessed after the JavaScript does it's work.
I found the culprit... It appears that a css font-family rule was to blame. Although, I'm not sure why since the same font stack is used several other places on the site. :\
Here's the line that caused the problem...
.Site-Search .Buttons input
{
...
font-family: TeXGyreHerosRegular, Arial, "Helvetica Neue", Helvetica, sans-serif;
...
}
For whatever reason that line caused all stock Android browsers to crash. Weird.
Check out Weinre. An explanation can be seen in this youtube movie.
That way you can debug the Android webkit browser just like the well known Firebug.
In Eclipse's emulator (2.3) it loads fine but has some layout flaws.
If anyone came here looking for a possible reason why all of their mobile's different browsers crash after a several seconds when loading a particular website it may be due to the version of jQuery employed.
For example, the LG-p690f and HTC Incredible S are some of several Android 2.3.x phones known to have troubles with fade transitions in jQuery 1.8.1 and 1.8.2 due to a browser javascript bug that will cause jQuery's Animation function to fail at this line:
percent = 1 - ( remaining / animation.duration || 0 )
If you are the owner of the website you can try upgrading to 1.8.3 (or downgrading to 1.7.x if allowed). Otherwise, you can send an e-mail to the website.
Sources:
http://bugs.jquery.com/ticket/12497
https://github.com/jquery/jquery/pull/1019