javascriptでdeviceorientationの値がおかしくなる

Question

deviceorientationのイベントでe.alpha, e.beta, e.gammaを取得してDOM要素を回転させようと思うのですが、
デバイスを地面に対して垂直(縦)にした時にgammma、alphaの値が一瞬おかしくなってしまいます。
厳密に言いますと、縦に近づけるほどおかしくなります。
また、水平にした時は問題なく動作しております。

他サイトで公開されているサンプルをいくつか見てみましたが、この不具合に対応しているものは見当たりませんでした。
deviceorientationの仕様でこの様な値が返ってきているのだと思いますが
何か対応策などありましたらご教授いただけますと幸いです。

下記、行なっている処理の一部です。

window.addEventListener('deviceorientation', deviceOrientationHandler, false);
function deviceOrientationHandler (e) {
  var rotateX = e.beta;
  var rotateY = e.gamma;

  $(".test").css({
   "transform": "rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)"
  });	
}

追記：
値に関しまして、例えば端末を横に回転したりせずただ垂直に持ち上げた時はbetaの値のみ変更しており
gammaの値も途中まではほぼ0の値(値が変わらない)を出していましたが、
端末の角度が80度を超えたあたりからgammaの値が急に増加し垂直状態で90となりました。
垂直を超えてさらに回転させると値が突然-90となりそこから-80,-70と値が変化していきました。

Comments

[turbgraphics200]

具体的にどのようにおかしくなるのかを追記したほうがいいと思われ

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[ryuryu]

turbgraphics200様、kei344様ご回答ありがとうございます。ご指摘頂いた内容で編集・追記させていただきました。

Answer 1

いわゆるジンバルロックに近い現象かもしれません。

1つの角度が極端になると、他の角度で自由度が減ってくるので、ちょっとした誤差が増幅されて、値の異常な振れとなってしまうのです。

Comments

[ryuryu]

maisumakun様、ご回答ありがとうございます。
ジンバルロックという現象があるんですね。

仰っている内容と今回の不具合は近い感じが致します。
ただ、その場合どういった計算式でその値を修正すれば良いのか私には分からないです。。。

引き続き調査をしてみますが何かご参考になる処理、またはソースなどはご存知でしょうか？
お手数おかけしますがご回答頂けますと幸いです。