Fix iOS mode change glitch.

immersive-web · Mar 26, 2016 · 0d933e2 · 0d933e2
1 parent f7d045b
commit 0d933e2
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/build/webvr-polyfill.js b/build/webvr-polyfill.js
@@ -388,10 +388,8 @@ function CardboardDistorter(gl) {
   this.realColorMask = gl.colorMask;
   this.realClearColor = gl.clearColor;
   this.realViewport = gl.viewport;
-  this.realCanvasWidth = Object.getOwnPropertyDescriptor(gl.canvas.__proto__, 'width');
-  this.realCanvasWidth.configurable = true;
-  this.realCanvasHeight = Object.getOwnPropertyDescriptor(gl.canvas.__proto__, 'height');
-  this.realCanvasHeight.configurable = true;
+  this.realCanvasWidth = this.getOwnPropertyDescriptor_(gl.canvas.__proto__, 'width');
+  this.realCanvasHeight = this.getOwnPropertyDescriptor_(gl.canvas.__proto__, 'height');
 
   this.isPatched = false;
 
@@ -914,7 +912,26 @@ CardboardDistorter.prototype.computeMeshIndices_ = function(width, height) {
     }
   }
   return indices;
-}
+};
+
+CardboardDistorter.prototype.getOwnPropertyDescriptor_ = function(proto, attrName) {
+  var descriptor = Object.getOwnPropertyDescriptor(proto, attrName);
+  // In some cases (ahem... Safari), the descriptor returns undefined get and
+  // set fields. In this case, we need to create a synthetic property
+  // descriptor. This works around some of the issues in
+  // https://github.com/borismus/webvr-polyfill/issues/46
+  if (descriptor.get === undefined || descriptor.set === undefined) {
+    descriptor.configurable = true;
+    descriptor.enumerable = true;
+    descriptor.get = function() {
+      return this.getAttribute(attrName);
+    };
+    descriptor.set = function(val) {
+      this.setAttribute(attrName, val);
+    };
+  }
+  return descriptor;
+};
 
 module.exports = CardboardDistorter;
 

diff --git a/src/cardboard-distorter.js b/src/cardboard-distorter.js
@@ -65,10 +65,8 @@ function CardboardDistorter(gl) {
   this.realColorMask = gl.colorMask;
   this.realClearColor = gl.clearColor;
   this.realViewport = gl.viewport;
-  this.realCanvasWidth = Object.getOwnPropertyDescriptor(gl.canvas.__proto__, 'width');
-  this.realCanvasWidth.configurable = true;
-  this.realCanvasHeight = Object.getOwnPropertyDescriptor(gl.canvas.__proto__, 'height');
-  this.realCanvasHeight.configurable = true;
+  this.realCanvasWidth = this.getOwnPropertyDescriptor_(gl.canvas.__proto__, 'width');
+  this.realCanvasHeight = this.getOwnPropertyDescriptor_(gl.canvas.__proto__, 'height');
 
   this.isPatched = false;
 
@@ -591,6 +589,25 @@ CardboardDistorter.prototype.computeMeshIndices_ = function(width, height) {
     }
   }
   return indices;
-}
+};
+
+CardboardDistorter.prototype.getOwnPropertyDescriptor_ = function(proto, attrName) {
+  var descriptor = Object.getOwnPropertyDescriptor(proto, attrName);
+  // In some cases (ahem... Safari), the descriptor returns undefined get and
+  // set fields. In this case, we need to create a synthetic property
+  // descriptor. This works around some of the issues in
+  // https://github.com/borismus/webvr-polyfill/issues/46
+  if (descriptor.get === undefined || descriptor.set === undefined) {
+    descriptor.configurable = true;
+    descriptor.enumerable = true;
+    descriptor.get = function() {
+      return this.getAttribute(attrName);
+    };
+    descriptor.set = function(val) {
+      this.setAttribute(attrName, val);
+    };
+  }
+  return descriptor;
+};
 
 module.exports = CardboardDistorter;