iOS chrome - xhr.timeout throws error when translating page

Question

This is a pretty surreal issue. When I'm using chrome on iOS, I can't set xhr.timeout. It throws InvalidAccessError: The object does not support the operation or argument.

You can reproduce it by going here: https://viktorh.net/chromebug.html in chrome on iOS. Then translate the page using chrome's build in translator - now call to XHR.timeout fails.

Does anyone have any idea of why this could be? If it's a bug in chrome, does anyone know a workaround? And where can you report issues like this?

Answer 1

That's pretty bizarre. I can reproduce the issue and it does look like a niche bug in Chrome on iOS. By default XMLHttpRequest has an infinite timeout but you could workaround this by manually creating a timeout to abort the request. To be safe I'd clear this timeout on the loadend, when the request succeeds or fails. Something like this:

         var oReq = new XMLHttpRequest();
         oReq.addEventListener("load", reqListener);
         var timeout;
         oReq.addEventListener("loadend", function() {
            // request over - clear timeout
            clearTimeout(timeout);
         });
         // set a timeout to abort the request
         timeout = setTimeout(function() {
            oReq.abort();
            // we timed out
         },20000);

         oReq.open("GET", "/");