jizai1125 / vue-countup-v3

A Vue 3 Component for animation counting.
https://jizai1125.github.io/vue-countup-v3/examples
163 stars 4 forks source link

Lower versions such as Android 9 are not compatible #5

Open yojigoji opened 1 year ago

yojigoji commented 1 year ago

Describe the bug it makes all pages can not be shown, and there is no any error messgaes consoled

jizai1125 commented 1 year ago

Let me check, is it because the requestAnimationFrame API isn't supported?

yojigoji commented 1 year ago

Let me check, is it because the requestAnimationFrame API isn't supported ?

If you find the answer, please let me know, thank you

jizai1125 commented 1 year ago

Let me check, is it because the requestAnimationFrame API isn't supported?

If you find the answer, please let me know, thank you

Which browser and version are you using?

yojigoji commented 1 year ago

Let me check, is it because the requestAnimationFrame API isn't supported ?

If you find the answer, please let me know, thank you

Which browser and version are you using?

It is an embedded brwoser of Native App on Android 9 and Android 8. I guess it would be happened on system Browser also.

jizai1125 commented 1 year ago

Can you help me troubleshoot the problem? I don't have an Android 9 phone. To determine if the requestAnimationFrame API is the cause of the issue, you can try importing the polyfill below.

// make sure requestAnimationFrame and cancelAnimationFrame are defined
// polyfill for browsers without native support
// by Opera engineer Erik Möller
(function () {
  var lastTime = 0;
  var vendors = ['webkit', 'moz', 'ms', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
      window[vendors[x] + 'CancelRequestAnimationFrame'];
  }
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = function (callback) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function () { return callback(currTime + timeToCall); }, timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };
  }
  if (!window.cancelAnimationFrame) {
    window.cancelAnimationFrame = function (id) {
      clearTimeout(id);
    };
  }
})();