diff --git a/.eslintrc.json b/.eslintrc.json
index 7e027656..35c702a5 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -8,10 +8,6 @@
             "off",
             4
         ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
         "quotes": [
             "off",
             "double"
diff --git a/src/mousetracker.js b/src/mousetracker.js
index d81f5561..aa5eb35f 100644
--- a/src/mousetracker.js
+++ b/src/mousetracker.js
@@ -862,6 +862,21 @@
         blurHandler: function () { }
     };
 
+    /**
+     * Resets all active mousetrakers. (Added to patch issue #697 "Mouse up outside map will cause "canvas-drag" event to stick")
+     *
+     * @private
+     * @member resetAllMouseTrackers
+     * @memberof OpenSeadragon.MouseTracker
+     */
+    $.MouseTracker.resetAllMouseTrackers = function(){
+        for(var i = 0; i < MOUSETRACKERS.length; i++){
+            if (MOUSETRACKERS[i].isTracking()){
+                MOUSETRACKERS[i].setTracking(false);
+                MOUSETRACKERS[i].setTracking(true);
+            }
+        }
+    };
 
     /**
      * Provides continuous computation of velocity (speed and direction) of active pointers.
diff --git a/src/viewer.js b/src/viewer.js
index 10e6e4a4..936e4eaf 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2639,6 +2639,7 @@ function onCanvasDblClick( event ) {
 
 function onCanvasDrag( event ) {
     var gestureSettings;
+
     var canvasDragEventArgs = {
         tracker: event.eventSource,
         position: event.position,
@@ -2667,7 +2668,8 @@ function onCanvasDrag( event ) {
      * @property {?Object} userData - Arbitrary subscriber-defined object.
      */
     this.raiseEvent( 'canvas-drag', canvasDragEventArgs);
-    if ( !canvasDragEventArgs.preventDefaultAction && this.viewport ) {
+
+    if ( !event.preventDefaultAction && this.viewport ) {
         gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
         if( !this.panHorizontal ){
             event.delta.x = 0;
@@ -2675,12 +2677,29 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        if( event.delta.x !== 0 || event.delta.y !== 0 ){
-            this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled );
-            if( this.constrainDuringPan ){
-                this.viewport.applyConstraints();
+
+        if( this.constrainDuringPan ){
+            var delta = this.viewport.deltaPointsFromPixels( event.delta.negate() );
+
+            this.viewport.centerSpringX.target.value += delta.x;
+            this.viewport.centerSpringY.target.value += delta.y;
+
+            var bounds = this.viewport.getBounds();
+            var constrainedBounds = this.viewport.getConstrainedBounds();
+
+            this.viewport.centerSpringX.target.value -= delta.x;
+            this.viewport.centerSpringY.target.value -= delta.y;
+
+            if (bounds.x != constrainedBounds.x) {
+                event.delta.x = 0;
+            }
+
+            if (bounds.y != constrainedBounds.y) {
+                event.delta.y = 0;
             }
         }
+
+        this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled );
     }
 }
 
@@ -2763,6 +2782,11 @@ function onCanvasEnter( event ) {
 }
 
 function onCanvasExit( event ) {
+
+    if (window.location != window.parent.location){
+        $.MouseTracker.resetAllMouseTrackers();
+    }
+
     /**
      * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
      *
diff --git a/src/viewport.js b/src/viewport.js
index 55851dc4..6a23b85f 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -733,6 +733,24 @@ $.Viewport.prototype = {
     },
 
 
+    /**
+     * Returns bounds taking constraints into account
+     * Added to improve constrained panning
+     * @param {Boolean} immediately
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
+    // Added to improve constrained panning
+    getConstrainedBounds: function( immediately ) {
+        var bounds,
+            constrainedBounds;
+
+        bounds = this.getBounds();
+
+        constrainedBounds = this._applyBoundaryConstraints( bounds, immediately );
+
+        return constrainedBounds;
+    },
+
     /**
      * @function
      * @param {OpenSeadragon.Point} delta
diff --git a/test/demo/constrainedpan.html b/test/demo/constrainedpan.html
new file mode 100644
index 00000000..1cd7578a
--- /dev/null
+++ b/test/demo/constrainedpan.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>OpenSeadragon fitBoundsWithConstraints() Demo</title>
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+    <style type="text/css">
+
+      .openseadragon1 {
+          width: 800px;
+          height: 600px;
+      }
+
+      #highlights li {
+        cursor: pointer;
+      }
+
+    </style>
+</head>
+<body>
+    <div>
+        <p>Simple demo to see panning improvements using the following settings:</p>
+        <ul>
+            <li>homeFillsViewer: true</li>
+            <li>showZoomControl: false,</li>
+            <li>constrainDuringPan: true,</li>
+            <li>visibilityRatio: 1,</li>
+        </ul>
+    </div>
+
+    <div id="contentDiv" class="openseadragon1"></div>
+
+    <script type="text/javascript">
+
+        var _viewer;
+
+        var _viewer = OpenSeadragon({
+            element: document.getElementById("contentDiv"),
+            tileSources:  "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
+            homeFillsViewer: true,
+            showZoomControl: false,
+            constrainDuringPan: true,
+            visibilityRatio: 1,
+            prefixUrl: "../../build/openseadragon/images/",
+            minZoomImageRatio: 1
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/test/demo/iframe-embed.html b/test/demo/iframe-embed.html
new file mode 100644
index 00000000..33a34b45
--- /dev/null
+++ b/test/demo/iframe-embed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Iframe example embed</title>
+
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+
+    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <style>
+      html, body { height: 100%; margin: 0; padding: 0; background-color: white;}
+    </style>
+  </head>
+
+  <body>
+    <div id="contentDiv" allowfullscreen style="height: 100%"> </div>
+
+    <script type="text/javascript">
+
+        var _viewer = OpenSeadragon({
+            element: document.getElementById("contentDiv"),
+            tileSources:  "https://openseadragon.github.io/example-images/duomo/duomo.dzi",
+            homeFillsViewer: true,
+            showZoomControl: false,
+            constrainDuringPan: true,
+            visibilityRatio: 1,
+            prefixUrl: "../../build/openseadragon/images/",
+            minZoomImageRatio: 1
+        });
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/test/demo/iframe-host.html b/test/demo/iframe-host.html
new file mode 100644
index 00000000..ea602473
--- /dev/null
+++ b/test/demo/iframe-host.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Iframe example</title>
+
+    <script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
+
+    <meta name="viewport" content="initial-scale=1.0">
+    <meta charset="utf-8">
+    <style>
+      html, body { height: 100%; margin: 0; padding: 0; background-color: white;}
+    </style>
+  </head>
+
+  <body>
+    <iframe src="iframe-embed.html" frameborder="0" width="560" height="315" allowfullscreen></iframe>
+  </body>
+</html>
\ No newline at end of file