diff --git a/.eslintrc.json b/.eslintrc.json
index 7e027656..fe8e34e6 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -8,10 +8,10 @@
             "off",
             4
         ],
-        "linebreak-style": [
-            "error",
-            "unix"
-        ],
+        //"linebreak-style": [
+        //    "error",
+        //    "unix"
+        //],
         "quotes": [
             "off",
             "double"
diff --git a/src/mousetracker.js b/src/mousetracker.js
index 3dbcf595..e9d5f0e9 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(){
+        MOUSETRACKERS.forEach(function(mt){
+            if (mt.isTracking()){
+                mt.setTracking(false);
+                mt.setTracking(true);
+            }
+        });
+    };
 
     /**
      * Provides continuous computation of velocity (speed and direction) of active pointers.
diff --git a/src/viewer.js b/src/viewer.js
index cea725a3..b3a51d03 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2530,6 +2530,7 @@ function onCanvasDblClick( event ) {
     });
 }
 
+// Modified to improve constrained panning
 function onCanvasDrag( event ) {
     var gestureSettings;
 
@@ -2541,11 +2542,31 @@ function onCanvasDrag( event ) {
         if( !this.panVertical ){
             event.delta.y = 0;
         }
-        this.viewport.panBy( this.viewport.deltaPointsFromPixels( event.delta.negate() ), gestureSettings.flickEnabled );
+
         if( this.constrainDuringPan ){
-            this.viewport.applyConstraints();
+            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 );
     }
+
     /**
      * Raised when a mouse or touch drag operation occurs on the {@link OpenSeadragon.Viewer#canvas} element.
      *
@@ -2652,6 +2673,8 @@ function onCanvasEnter( event ) {
 }
 
 function onCanvasExit( event ) {
+
+    $.MouseTracker.resetAllMouseTrackers(); // <== Necessary to patch issue #697 "Mouse up outside map will cause "canvas-drag" event to stick"
     /**
      * Raised when a pointer leaves the {@link OpenSeadragon.Viewer#canvas} element.
      *
diff --git a/src/viewport.js b/src/viewport.js
index 7d5418bd..bc06530e 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -733,6 +733,33 @@ $.Viewport.prototype = {
     },
 
 
+    /**
+     * Returns bounds taking constrains into account
+     * Added to improve constrained panning
+     * @param {Boolean} immediately
+     * @return {OpenSeadragon.Viewport} Chainable.
+     */
+    // Added to improve constrained panning
+    getConstrainedBounds: function( immediately ) {
+        var actualZoom = this.getZoom(),
+            constrainedZoom = Math.max(
+                Math.min( actualZoom, this.getMaxZoom() ),
+                this.getMinZoom()
+            ),
+            bounds,
+            constrainedBounds;
+
+        if ( actualZoom != constrainedZoom ) {
+            this.zoomTo( constrainedZoom, this.zoomPoint, immediately );
+        }
+
+        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..0b64eef1
--- /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>
diff --git a/test/demo/embed.html b/test/demo/embed.html
new file mode 100644
index 00000000..07dfb66c
--- /dev/null
+++ b/test/demo/embed.html
@@ -0,0 +1,33 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CartoWall Climbing Topo</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>
diff --git a/test/demo/iframe.html b/test/demo/iframe.html
new file mode 100644
index 00000000..375cbdee
--- /dev/null
+++ b/test/demo/iframe.html
@@ -0,0 +1,19 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>CartoWall Climbing Topo</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="embed.html" frameborder="0" width="560" height="315" allowfullscreen></iframe>
+  </body>
+</html>