diff --git a/bower.json b/bower.json
index 0c50efe8..ee76797b 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "gitgraph.js",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": [ "./build/gitgraph.js", "./build/gitgraph.css" ],
   "ignore": [
     "**/.*"
diff --git a/build/gitgraph.js b/build/gitgraph.js
index d67ac4e9..a94dcc00 100644
--- a/build/gitgraph.js
+++ b/build/gitgraph.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- *                  GitGraph v1.3.0
+ *                  GitGraph v1.3.1
  *      https://github.com/nicoespeon/gitgraph.js
  * ==========================================================
  * Copyright (c) 2016 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶
@@ -384,8 +384,18 @@
    **/
   GitGraph.prototype.applyCommits = function ( event, callbackFn ) {
     // Fallback onto layerX/layerY for older versions of Firefox.
-    var offsetX = event.offsetX || event.layerX;
-    var offsetY = event.offsetY || event.layerY;
+    function getOffsetById ( id ) {
+      var el = document.getElementById( id );
+      var rect = el.getBoundingClientRect();
+
+      return {
+        top: rect.top + document.body.scrollTop,
+        left: rect.left + document.body.scrollLeft
+      };
+    }
+
+    var offsetX = event.offsetX || (event.pageX - getOffsetById( this.elementId ).left);
+    var offsetY = event.offsetY || (event.pageY - getOffsetById( this.elementId ).top);
 
     for ( var i = 0, commit; !!(commit = this.commits[ i ]); i++ ) {
       var distanceX = (commit.x + (this.offsetX + this.marginX) / this.scalingFactor - offsetX);
diff --git a/build/gitgraph.min.js b/build/gitgraph.min.js
index 26f73231..30920524 100644
--- a/build/gitgraph.min.js
+++ b/build/gitgraph.min.js
@@ -1,5 +1,5 @@
 /* ==========================================================
- *                  GitGraph v1.3.0
+ *                  GitGraph v1.3.1
  *      https://github.com/nicoespeon/gitgraph.js
  * ==========================================================
  * Copyright (c) 2016 Nicolas CARLO (@nicoespeon) ٩(^‿^)۶
@@ -7,4 +7,4 @@
  *
  * GitGraph.js may be freely distributed under the MIT Licence
  * ========================================================== */
-!function(){"use strict";function a(a,b,c){var d;document.createEvent?(d=document.createEvent("HTMLEvents"),d.initEvent(b,!0,!0)):(d=document.createEventObject(),d.eventType=b),d.eventName=b,d.data=c||{},document.createEvent?a.dispatchEvent(d):a.fireEvent("on"+d.eventType,d)}function b(a){var b,c;return c=1,window.devicePixelRatio&&(b=a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1,c*=window.devicePixelRatio/b),c}function c(a){return"vertical"===a.orientation||"vertical-reverse"===a.orientation}function d(a){return"horizontal"===a.orientation||"horizontal-reverse"===a.orientation}function e(a){switch(a="object"==typeof a?a:{},this.elementId="string"==typeof a.elementId?a.elementId:"gitGraph",this.author="string"==typeof a.author?a.author:"Sergio Flores <saxo-guy@epic.com>",this.reverseArrow=i(a.reverseArrow,!1),this.template="string"==typeof a.template||"object"==typeof a.template?this.newTemplate(a.template):a.template instanceof h?a.template:this.newTemplate("metro"),this.mode=a.mode||null,"compact"===this.mode&&(this.template.commit.message.display=!1),a.orientation){case"vertical-reverse":this.template.commit.spacingY*=-1,this.orientation="vertical-reverse",this.template.branch.labelRotation=0,this.template.commit.tag.spacingY*=-1;break;case"horizontal":this.template.commit.message.display=!1,this.template.commit.spacingX=this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal",this.template.branch.labelRotation=-90,this.template.commit.tag.spacingX=-this.template.commit.spacingX,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;case"horizontal-reverse":this.template.commit.message.display=!1,this.template.commit.spacingX=-this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal-reverse",this.template.branch.labelRotation=90,this.template.commit.tag.spacingX=-this.template.commit.spacingY,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;default:this.orientation="vertical",this.template.branch.labelRotation=0}this.marginX=this.template.branch.spacingX+2*this.template.commit.dot.size,this.marginY=this.template.branch.spacingY+2*this.template.commit.dot.size,this.offsetX=0,this.offsetY=0,this.canvas=document.getElementById(this.elementId)||a.canvas,this.context=this.canvas.getContext("2d"),this.context.textBaseline="center",this.tooltip=document.createElement("div"),this.tooltip.className="gitgraph-tooltip",this.tooltip.style.position="fixed",this.tooltip.style.display="none",document.body.appendChild(this.tooltip),this.HEAD=null,this.branches=[],this.commits=[],this.columnMax=0,this.commitOffsetX=a.initCommitOffsetX||0,this.commitOffsetY=a.initCommitOffsetY||0;var b={handleEvent:this.hover,gitgraph:this};this.canvas.addEventListener("mousemove",b,!1);var c={handleEvent:this.click,gitgraph:this};this.canvas.addEventListener("mousedown",c,!1),window.onresize=this.render.bind(this)}function f(a){if(a.parent instanceof e!=!1){if(a="object"==typeof a?a:{},this.parent=a.parent,a.parentCommit&&a.parentBranch){if(a.parentCommit.branch!==a.parentBranch)return;this.parentCommit=a.parentCommit,this.parentBranch=a.parentBranch}else a.parentCommit?(this.parentCommit=a.parentCommit,this.parentBranch=a.parentCommit.branch):a.parentBranch?(this.parentCommit=a.parentBranch.commits.slice(-1)[0],this.parentBranch=a.parentBranch):(this.parentCommit=null,this.parentBranch=null);this.name="string"==typeof a.name?a.name:"no-name",this.context=this.parent.context,this.template=this.parent.template,this.lineWidth=a.lineWidth||this.template.branch.lineWidth,this.lineDash=a.lineDash||this.template.branch.lineDash,this.showLabel=i(a.showLabel,this.template.branch.showLabel),this.spacingX=this.template.branch.spacingX,this.spacingY=this.template.branch.spacingY,this.size=0,this.height=0,this.width=0,this.commits=[],this.path=[],"number"==typeof a.column?this.column=a.column:(this.column=0,this.calculColumn()),this.parent.columnMax=this.column>this.parent.columnMax?this.column:this.parent.columnMax,this.offsetX=this.column*this.spacingX,this.offsetY=this.column*this.spacingY,this.startPoint=this.parentBranch?this.parentCommit===this.parentBranch.commits.slice(-1)[0]?{x:this.parentBranch.offsetX-this.parent.commitOffsetX+this.template.commit.spacingX,y:this.parentBranch.offsetY-this.parent.commitOffsetY+this.template.commit.spacingY,type:"start"}:{x:this.parentCommit.x,y:this.parentCommit.y,type:"start"}:null;var b=this.column%this.template.colors.length;this.color=a.color||this.template.branch.color||this.template.colors[b],this.checkout()}}function g(a){a.parent instanceof e!=!1&&(a="object"==typeof a?a:{},this.parent=a.parent,this.template=this.parent.template,this.context=this.parent.context,this.branch=a.branch,this.author=a.author||this.parent.author,this.date=a.date||(new Date).toUTCString(),this.detail=a.detail||null,this.tag=a.tag||null,this.tagColor=a.tagColor||a.color,this.tagFont=a.tagFont||this.template.commit.tag.font,this.displayTagBox=i(a.displayTagBox,!0),this.sha1=a.sha1||Math.random(100).toString(16).substring(3,10),this.message=a.message||"He doesn't like George Michael! Boooo!",this.arrowDisplay=a.arrowDisplay,this.messageDisplay=i(a.messageDisplay,this.template.commit.message.display),this.messageAuthorDisplay=i(a.messageAuthorDisplay,this.template.commit.message.displayAuthor),this.messageBranchDisplay=i(a.messageBranchDisplay,this.template.commit.message.displayBranch),this.messageHashDisplay=i(a.messageHashDisplay,this.template.commit.message.displayHash),this.messageColor=a.messageColor||a.color,this.messageFont=a.messageFont||this.template.commit.message.font,this.dotColor=a.dotColor||a.color,this.dotSize=a.dotSize||this.template.commit.dot.size,this.dotStrokeWidth=a.dotStrokeWidth||this.template.commit.dot.strokeWidth,this.dotStrokeColor=a.dotStrokeColor||this.template.commit.dot.strokeColor||a.color,this.type=a.type||null,this.onClick=a.onClick||null,this.representedObject=a.representedObject||null,this.parentCommit=a.parentCommit,this.x=a.x,this.y=a.y,this.showLabel=a.showLabel,this.labelColor=a.labelColor||a.color,this.labelFont=a.labelFont||this.template.branch.labelFont,this.parent.commits.push(this))}function h(a){a="object"==typeof a?a:{},a.branch=a.branch||{},a.arrow=a.arrow||{},a.commit=a.commit||{},a.commit.dot=a.commit.dot||{},a.commit.tag=a.commit.tag||{},a.commit.message=a.commit.message||{},this.colors=a.colors||["#6963FF","#47E8D4","#6BDB52","#E84BA5","#FFA657"],this.branch={},this.branch.color=a.branch.color||null,this.branch.lineWidth=a.branch.lineWidth||2,this.branch.lineDash=a.branch.lineDash||[],this.branch.showLabel=a.branch.showLabel||!1,this.branch.labelColor=a.branch.labelColor||null,this.branch.labelFont=a.branch.labelFont||"normal 8pt Calibri",this.branch.labelRotation=a.branch.labelRotation||0,this.branch.mergeStyle=a.branch.mergeStyle||"bezier",this.branch.spacingX="number"==typeof a.branch.spacingX?a.branch.spacingX:20,this.branch.spacingY=a.branch.spacingY||0,this.arrow={},this.arrow.size=a.arrow.size||null,this.arrow.color=a.arrow.color||null,this.arrow.active="number"==typeof this.arrow.size,this.arrow.offset=a.arrow.offset||2,this.commit={},this.commit.spacingX=a.commit.spacingX||0,this.commit.spacingY="number"==typeof a.commit.spacingY?a.commit.spacingY:25,this.commit.widthExtension="number"==typeof a.commit.widthExtension?a.commit.widthExtension:0,this.commit.tooltipHTMLFormatter=a.commit.tooltipHTMLFormatter||null,this.commit.shouldDisplayTooltipsInCompactMode=i(a.commit.shouldDisplayTooltipsInCompactMode,!0),this.commit.color=a.commit.color||null,this.commit.dot={},this.commit.dot.color=a.commit.dot.color||null,this.commit.dot.size=a.commit.dot.size||3,this.commit.dot.strokeWidth=a.commit.dot.strokeWidth||null,this.commit.dot.strokeColor=a.commit.dot.strokeColor||null,this.commit.tag={},this.commit.tag.color=a.commit.tag.color||this.commit.dot.color,this.commit.tag.font=a.commit.tag.font||a.commit.message.font||"normal 10pt Calibri",this.commit.tag.spacingX=this.branch.spacingX,this.commit.tag.spacingY=this.commit.spacingY,this.commit.message={},this.commit.message.display=i(a.commit.message.display,!0),this.commit.message.displayAuthor=i(a.commit.message.displayAuthor,!0),this.commit.message.displayBranch=i(a.commit.message.displayBranch,!0),this.commit.message.displayHash=i(a.commit.message.displayHash,!0),this.commit.message.color=a.commit.message.color||null,this.commit.message.font=a.commit.message.font||"normal 12pt Calibri"}function i(a,b){return"boolean"==typeof a?a:b}function j(a,b,c,d,e,f,g,h){a.save(),a.translate(b,c),a.rotate(g*(Math.PI/180)),a.textAlign="center",a.font=f;var i=a.measureText(d).width,j=k(f);h?(a.beginPath(),a.rect(-(i/2)-4,-(j/2)+2,i+8,j+2),a.fillStyle=e,a.fill(),a.lineWidth=2,a.strokeStyle="black",a.stroke(),a.fillStyle="black"):a.fillStyle=e,a.fillText(d,0,j/2),a.restore()}e.prototype.branch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this,a.parentBranch=a.parentBranch||this.HEAD;var c=new f(a);return this.branches.push(c),c},e.prototype.orphanBranch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this;var c=new f(a);return this.branches.push(c),c},e.prototype.commit=function(a){return this.HEAD.commit(a),this},e.prototype.newTemplate=function(a){return"string"==typeof a?(new h).get(a):new h(a)},e.prototype.render=function(){this.scalingFactor=b(this.context);var c={x:Math.abs((this.columnMax+1)*this.template.branch.spacingX)+Math.abs(this.commitOffsetX)+2*this.marginX,y:Math.abs((this.columnMax+1)*this.template.branch.spacingY)+Math.abs(this.commitOffsetY)+2*this.marginY};this.template.commit.message.display&&(c.x+=800),c.x+=this.template.commit.widthExtension,this.canvas.style.width=c.x+"px",this.canvas.style.height=c.y+"px",this.canvas.width=c.x*this.scalingFactor,this.canvas.height=c.y*this.scalingFactor,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.translate(this.marginX,this.marginY),this.template.commit.spacingY>0&&(this.context.translate(0,this.canvas.height-2*this.marginY),this.offsetY=this.canvas.height-2*this.marginY),this.template.commit.spacingX>0&&(this.context.translate(this.canvas.width-2*this.marginX,0),this.offsetX=this.canvas.width-2*this.marginX),this.context.scale(this.scalingFactor,this.scalingFactor);for(var d,e=this.branches.length-1;d=this.branches[e];e--)d.render();this.tagNum=0;for(var f,g=0;f=this.commits[g];g++)f.render();a(this.canvas,"graph:render",{id:this.elementId})},e.prototype.applyCommits=function(a,b){for(var c,d=a.offsetX||a.layerX,e=a.offsetY||a.layerY,f=0;c=this.commits[f];f++){var g=c.x+(this.offsetX+this.marginX)/this.scalingFactor-d,h=c.y+(this.offsetY+this.marginY)/this.scalingFactor-e,i=Math.sqrt(Math.pow(g,2)+Math.pow(h,2)),j=i<this.template.commit.dot.size;b(c,j)}},e.prototype.hover=function(b){function c(a){"undefined"!=typeof InstallTrigger&&(b.x=b.x?b.x:b.clientX,b.y=b.y?b.y:b.clientY),e.tooltip.style.left=b.x+"px",e.tooltip.style.top=b.y+"px",null!==e.template.commit.tooltipHTMLFormatter?e.tooltip.innerHTML=e.template.commit.tooltipHTMLFormatter(a):e.tooltip.textContent=a.sha1+" - "+a.message,e.tooltip.style.display="block"}function d(b,c){var d={author:b.author,message:b.message,date:b.date,sha1:b.sha1};a(e.canvas,"commit:"+c,d)}var e=this.gitgraph,f=!0;e.applyCommits(b,function(a,b){b?(!e.template.commit.message.display&&e.template.commit.shouldDisplayTooltipsInCompactMode&&c(a),a.isMouseOver||d(a,"mouseover"),f=!1,a.isMouseOver=!0):(a.isMouseOver&&d(a,"mouseout"),a.isMouseOver=!1)}),f&&(e.tooltip.style.display="none")},e.prototype.click=function(a){this.gitgraph.applyCommits(a,function(a,b){b&&null!==a.onClick&&a.onClick(a,!0)})},f.prototype.branch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this.parent,a.parentBranch=a.parentBranch||this;var c=new f(a);return this.parent.branches.push(c),c},f.prototype.render=function(){this.context.beginPath();for(var a,b=0;a=this.path[b];b++)if("start"===a.type)this.context.moveTo(a.x,a.y);else if("bezier"===this.template.branch.mergeStyle){var c=this.path[b-1];this.context.bezierCurveTo(c.x-this.template.commit.spacingX/2,c.y-this.template.commit.spacingY/2,a.x+this.template.commit.spacingX/2,a.y+this.template.commit.spacingY/2,a.x,a.y)}else this.context.lineTo(a.x,a.y);this.context.lineWidth=this.lineWidth,this.context.strokeStyle=this.color;var d;void 0!==this.context.setLineDash&&(d=this.context.getLineDash(),this.context.setLineDash(this.lineDash)),this.context.stroke(),this.context.closePath(),void 0!==d&&this.context.setLineDash(d)},f.prototype.commit=function(a){"string"==typeof a?a={message:a}:"object"!=typeof a&&(a={}),a.arrowDisplay=this.template.arrow.active,a.branch=this;var b=this.column%this.template.colors.length;a.color=a.color||this.template.commit.color||this.template.colors[b],a.parent=this.parent,a.parentCommit=a.parentCommit||this.commits.slice(-1)[0],"compact"===this.parent.mode&&this.parent.commits.slice(-1)[0]&&this.parent.commits.slice(-1)[0].branch!==a.branch&&a.branch.commits.length&&"mergeCommit"!==a.type&&(this.parent.commitOffsetX-=this.template.commit.spacingX,this.parent.commitOffsetY-=this.template.commit.spacingY),a.messageColor=a.messageColor||this.template.commit.message.color||a.color||null,a.labelColor=a.labelColor||this.template.branch.labelColor||a.color||null,a.tagColor=a.tagColor||this.template.commit.tag.color||a.color||null,a.dotColor=a.dotColor||this.template.commit.dot.color||a.color||null,a.x=this.offsetX-this.parent.commitOffsetX,a.y=this.offsetY-this.parent.commitOffsetY;var c="vertical"===this.parent.orientation,d="compact"!==this.parent.mode;a.detail="string"==typeof a.detailId&&c&&d?document.getElementById(a.detailId):null;var e=a.branch.commits.slice(-1)[0]||{},h=a.x+a.y,i=e.x+e.y,j=h===i;j&&(this.parent.commitOffsetX+=this.template.commit.spacingX,this.parent.commitOffsetY+=this.template.commit.spacingY,a.x=this.offsetX-this.parent.commitOffsetX,a.y=this.offsetY-this.parent.commitOffsetY),a.parentCommit instanceof g==!1&&this.parentBranch instanceof f&&(a.parentCommit=this.parentCommit);var k=!(a.parentCommit instanceof g),l=0===this.path.length;a.showLabel=l&&this.showLabel?!0:!1,a.showLabel&&(a.x-=this.template.commit.spacingX,a.y-=this.template.commit.spacingY);var m=new g(a);this.commits.push(m);var n={x:m.x,y:m.y,type:"join"};if(!k&&l){this.pushPath(this.startPoint),this.pushPath({x:this.startPoint.x-this.parentBranch.offsetX+this.offsetX-this.template.commit.spacingX,y:this.startPoint.y-this.parentBranch.offsetY+this.offsetY-this.template.commit.spacingY,type:"join"});var o=JSON.parse(JSON.stringify(this.startPoint));o.type="join",this.parentBranch.pushPath(o)}else l&&(n.type="start");return this.pushPath(n),this.parent.commitOffsetX+=this.template.commit.spacingX*(a.showLabel?2:1),this.parent.commitOffsetY+=this.template.commit.spacingY*(a.showLabel?2:1),null!==m.detail&&(m.detail.style.display="block",this.parent.commitOffsetY-=m.detail.clientHeight-40),this.parent.render(),this},f.prototype.checkout=function(){this.parent.HEAD=this},f.prototype.delete=function(){this.isfinish=!0},f.prototype.merge=function(a,b){var c=a||this.parent.HEAD;if(c instanceof f==!1||c===this)return this;var d="Merge branch `"+this.name+"` into `"+c.name+"`";if("object"!=typeof b){var e=b;b={},b.message="string"==typeof e?e:d}else b.message=b.message||d;b.type="mergeCommit",b.parentCommit=this.commits.slice(-1)[0],c.commit(b);var g=c.commits.slice(-1)[0],h={x:this.offsetX+this.template.commit.spacingX*(g.showLabel?3:2)-this.parent.commitOffsetX,y:this.offsetY+this.template.commit.spacingY*(g.showLabel?3:2)-this.parent.commitOffsetY,type:"join"};this.pushPath(JSON.parse(JSON.stringify(h)));var i={x:g.x,y:g.y,type:"end"};return this.pushPath(i),h.type="start",this.pushPath(h),this.parent.render(),this.parent.HEAD=c,this},f.prototype.calculColumn=function(){for(var a,b=[],c=0;a=this.parent.branches[c];c++)a.isfinish||(a.column in b||(b[a.column]=0),b[a.column]++);for(this.column=0;this.column in b&&0!==b[this.column];this.column++);},f.prototype.pushPath=function(a){var b=this.path.slice(-1)[0];b?b.x===a.x&&b.y===a.y?"start"!==b.type&&"end"===a.type?b.type="end":"join"===a.type||this.path.push(a):"join"===a.type?(a.x-b.x)*this.template.commit.spacingX<0?this.path.push(a):(a.y-b.y)*this.template.commit.spacingY<0&&this.path.push(a):this.path.push(a):this.path.push(a)},g.prototype.render=function(){this.showLabel&&j(this.context,this.x+this.template.commit.spacingX,this.y+this.template.commit.spacingY,this.branch.name,this.labelColor,this.labelFont,this.template.branch.labelRotation,!0),this.context.beginPath(),this.context.arc(this.x,this.y,this.dotSize,0,2*Math.PI,!1),this.context.fillStyle=this.dotColor,this.context.strokeStyle=this.dotStrokeColor,this.context.lineWidth=this.dotStrokeWidth,"number"==typeof this.dotStrokeWidth&&this.context.stroke(),this.context.fill(),this.context.closePath(),this.arrowDisplay&&this.parentCommit instanceof g&&this.arrow();var a=this.template.commit.tag.spacingX;if(null!==this.tag){this.parent.tagNum++,this.context.font=this.tagFont;var b=this.context.measureText(this.tag).width;if(0!==this.template.branch.labelRotation){var c=k(this.tagFont);j(this.context,this.x-this.dotSize/2,(this.parent.columnMax+1)*this.template.commit.tag.spacingY-this.template.commit.tag.spacingY/2+this.parent.tagNum%2*c*1.5,this.tag,this.tagColor,this.tagFont,0,this.displayTagBox)}else j(this.context,(this.parent.columnMax+1)*this.template.commit.tag.spacingX-this.template.commit.tag.spacingX/2+b/2,this.y-this.dotSize/2,this.tag,this.tagColor,this.tagFont,0,this.displayTagBox);a=b>a?b:a}this.context.font=this.messageFont;var d=(this.parent.columnMax+1)*this.template.branch.spacingX+a;if(null!==this.detail&&(this.detail.style.left=this.parent.canvas.offsetLeft+d+this.x+30+"px",this.detail.style.top=this.parent.canvas.offsetTop+this.y+40+"px",this.detail.width=30),this.messageDisplay){var e=this.message;this.messageHashDisplay&&(e=this.sha1+" "+e),this.messageAuthorDisplay&&(e+=this.author?" - "+this.author:""),this.messageBranchDisplay&&(e=(this.branch.name?"["+this.branch.name+"] ":"")+e),this.context.fillStyle=this.messageColor,this.context.fillText(e,d,this.y+this.dotSize/2)}},g.prototype.arrow=function(){function a(a,b){var c=f?-1:1;return Math.atan2(c*a,c*b)}var b=this.template.arrow.size,e=this.template.arrow.color||this.branch.color,f=this.parent.reverseArrow,g=a(this.parentCommit.y-this.y,this.parentCommit.x-this.x);if("mergeCommit"===this.type||this===this.branch.commits[0]){var h=this.parentCommit.branch.column-this.branch.column,i=this.showLabel?2:1,j=f&&c(this.parent)&&Math.abs(this.y-this.parentCommit.y)>Math.abs(this.template.commit.spacingY)||c(this.parent)&&i>1,k=j?0:this.template.branch.spacingX*h+this.template.commit.spacingX*i,l=f&&d(this.parent)&&Math.abs(this.x-this.parentCommit.x)>Math.abs(this.template.commit.spacingX)||d(this.parent)&&i>1,m=l?0:this.template.branch.spacingY*h+this.template.commit.spacingY*i;g=a(m,k),e=this.parentCommit.branch.color}var n=Math.PI/7,o=f?this.parentCommit.x:this.x,p=f?this.parentCommit.y:this.y,q=this.template.commit.dot.size+this.template.arrow.offset,r=q*Math.cos(g)+o,s=q*Math.sin(g)+p,t=(q+b)*Math.cos(g-n)+o,u=(q+b)*Math.sin(g-n)+p,v=(q+b/2)*Math.cos(g)+o,w=(q+b/2)*Math.sin(g)+p,x=(q+b)*Math.cos(g+n)+o,y=(q+b)*Math.sin(g+n)+p;this.context.beginPath(),this.context.fillStyle=e,this.context.moveTo(r,s),this.context.lineTo(t,u),this.context.quadraticCurveTo(v,w,x,y),this.context.lineTo(x,y),this.context.fill()},h.prototype.get=function(a){var b={};switch(a){case"blackarrow":b={branch:{color:"#000000",lineWidth:4,spacingX:50,mergeStyle:"straight"},commit:{spacingY:-60,dot:{size:12,strokeColor:"#000000",strokeWidth:7},message:{color:"black"}},arrow:{size:16,offset:2.5}};break;case"metro":default:b={colors:["#979797","#008fb5","#f1c109"],branch:{lineWidth:10,spacingX:50},commit:{spacingY:-80,dot:{size:14},message:{font:"normal 14pt Arial"}}}}return new h(b)};var k=function(a){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d=document.createTextNode("Mg");c.appendChild(d),c.setAttribute("style","font: "+a+";"),b.appendChild(c);var e=c.offsetHeight;return b.removeChild(c),e};window.GitGraph=e,window.GitGraph.Branch=f,window.GitGraph.Commit=g,window.GitGraph.Template=h}();
\ No newline at end of file
+!function(){"use strict";function a(a,b,c){var d;document.createEvent?(d=document.createEvent("HTMLEvents"),d.initEvent(b,!0,!0)):(d=document.createEventObject(),d.eventType=b),d.eventName=b,d.data=c||{},document.createEvent?a.dispatchEvent(d):a.fireEvent("on"+d.eventType,d)}function b(a){var b,c;return c=1,window.devicePixelRatio&&(b=a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1,c*=window.devicePixelRatio/b),c}function c(a){return"vertical"===a.orientation||"vertical-reverse"===a.orientation}function d(a){return"horizontal"===a.orientation||"horizontal-reverse"===a.orientation}function e(a){switch(a="object"==typeof a?a:{},this.elementId="string"==typeof a.elementId?a.elementId:"gitGraph",this.author="string"==typeof a.author?a.author:"Sergio Flores <saxo-guy@epic.com>",this.reverseArrow=i(a.reverseArrow,!1),this.template="string"==typeof a.template||"object"==typeof a.template?this.newTemplate(a.template):a.template instanceof h?a.template:this.newTemplate("metro"),this.mode=a.mode||null,"compact"===this.mode&&(this.template.commit.message.display=!1),a.orientation){case"vertical-reverse":this.template.commit.spacingY*=-1,this.orientation="vertical-reverse",this.template.branch.labelRotation=0,this.template.commit.tag.spacingY*=-1;break;case"horizontal":this.template.commit.message.display=!1,this.template.commit.spacingX=this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal",this.template.branch.labelRotation=-90,this.template.commit.tag.spacingX=-this.template.commit.spacingX,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;case"horizontal-reverse":this.template.commit.message.display=!1,this.template.commit.spacingX=-this.template.commit.spacingY,this.template.branch.spacingY=this.template.branch.spacingX,this.template.commit.spacingY=0,this.template.branch.spacingX=0,this.orientation="horizontal-reverse",this.template.branch.labelRotation=90,this.template.commit.tag.spacingX=-this.template.commit.spacingY,this.template.commit.tag.spacingY=this.template.branch.spacingY;break;default:this.orientation="vertical",this.template.branch.labelRotation=0}this.marginX=this.template.branch.spacingX+2*this.template.commit.dot.size,this.marginY=this.template.branch.spacingY+2*this.template.commit.dot.size,this.offsetX=0,this.offsetY=0,this.canvas=document.getElementById(this.elementId)||a.canvas,this.context=this.canvas.getContext("2d"),this.context.textBaseline="center",this.tooltip=document.createElement("div"),this.tooltip.className="gitgraph-tooltip",this.tooltip.style.position="fixed",this.tooltip.style.display="none",document.body.appendChild(this.tooltip),this.HEAD=null,this.branches=[],this.commits=[],this.columnMax=0,this.commitOffsetX=a.initCommitOffsetX||0,this.commitOffsetY=a.initCommitOffsetY||0;var b={handleEvent:this.hover,gitgraph:this};this.canvas.addEventListener("mousemove",b,!1);var c={handleEvent:this.click,gitgraph:this};this.canvas.addEventListener("mousedown",c,!1),window.onresize=this.render.bind(this)}function f(a){if(a.parent instanceof e!=!1){if(a="object"==typeof a?a:{},this.parent=a.parent,a.parentCommit&&a.parentBranch){if(a.parentCommit.branch!==a.parentBranch)return;this.parentCommit=a.parentCommit,this.parentBranch=a.parentBranch}else a.parentCommit?(this.parentCommit=a.parentCommit,this.parentBranch=a.parentCommit.branch):a.parentBranch?(this.parentCommit=a.parentBranch.commits.slice(-1)[0],this.parentBranch=a.parentBranch):(this.parentCommit=null,this.parentBranch=null);this.name="string"==typeof a.name?a.name:"no-name",this.context=this.parent.context,this.template=this.parent.template,this.lineWidth=a.lineWidth||this.template.branch.lineWidth,this.lineDash=a.lineDash||this.template.branch.lineDash,this.showLabel=i(a.showLabel,this.template.branch.showLabel),this.spacingX=this.template.branch.spacingX,this.spacingY=this.template.branch.spacingY,this.size=0,this.height=0,this.width=0,this.commits=[],this.path=[],"number"==typeof a.column?this.column=a.column:(this.column=0,this.calculColumn()),this.parent.columnMax=this.column>this.parent.columnMax?this.column:this.parent.columnMax,this.offsetX=this.column*this.spacingX,this.offsetY=this.column*this.spacingY,this.startPoint=this.parentBranch?this.parentCommit===this.parentBranch.commits.slice(-1)[0]?{x:this.parentBranch.offsetX-this.parent.commitOffsetX+this.template.commit.spacingX,y:this.parentBranch.offsetY-this.parent.commitOffsetY+this.template.commit.spacingY,type:"start"}:{x:this.parentCommit.x,y:this.parentCommit.y,type:"start"}:null;var b=this.column%this.template.colors.length;this.color=a.color||this.template.branch.color||this.template.colors[b],this.checkout()}}function g(a){a.parent instanceof e!=!1&&(a="object"==typeof a?a:{},this.parent=a.parent,this.template=this.parent.template,this.context=this.parent.context,this.branch=a.branch,this.author=a.author||this.parent.author,this.date=a.date||(new Date).toUTCString(),this.detail=a.detail||null,this.tag=a.tag||null,this.tagColor=a.tagColor||a.color,this.tagFont=a.tagFont||this.template.commit.tag.font,this.displayTagBox=i(a.displayTagBox,!0),this.sha1=a.sha1||Math.random(100).toString(16).substring(3,10),this.message=a.message||"He doesn't like George Michael! Boooo!",this.arrowDisplay=a.arrowDisplay,this.messageDisplay=i(a.messageDisplay,this.template.commit.message.display),this.messageAuthorDisplay=i(a.messageAuthorDisplay,this.template.commit.message.displayAuthor),this.messageBranchDisplay=i(a.messageBranchDisplay,this.template.commit.message.displayBranch),this.messageHashDisplay=i(a.messageHashDisplay,this.template.commit.message.displayHash),this.messageColor=a.messageColor||a.color,this.messageFont=a.messageFont||this.template.commit.message.font,this.dotColor=a.dotColor||a.color,this.dotSize=a.dotSize||this.template.commit.dot.size,this.dotStrokeWidth=a.dotStrokeWidth||this.template.commit.dot.strokeWidth,this.dotStrokeColor=a.dotStrokeColor||this.template.commit.dot.strokeColor||a.color,this.type=a.type||null,this.onClick=a.onClick||null,this.representedObject=a.representedObject||null,this.parentCommit=a.parentCommit,this.x=a.x,this.y=a.y,this.showLabel=a.showLabel,this.labelColor=a.labelColor||a.color,this.labelFont=a.labelFont||this.template.branch.labelFont,this.parent.commits.push(this))}function h(a){a="object"==typeof a?a:{},a.branch=a.branch||{},a.arrow=a.arrow||{},a.commit=a.commit||{},a.commit.dot=a.commit.dot||{},a.commit.tag=a.commit.tag||{},a.commit.message=a.commit.message||{},this.colors=a.colors||["#6963FF","#47E8D4","#6BDB52","#E84BA5","#FFA657"],this.branch={},this.branch.color=a.branch.color||null,this.branch.lineWidth=a.branch.lineWidth||2,this.branch.lineDash=a.branch.lineDash||[],this.branch.showLabel=a.branch.showLabel||!1,this.branch.labelColor=a.branch.labelColor||null,this.branch.labelFont=a.branch.labelFont||"normal 8pt Calibri",this.branch.labelRotation=a.branch.labelRotation||0,this.branch.mergeStyle=a.branch.mergeStyle||"bezier",this.branch.spacingX="number"==typeof a.branch.spacingX?a.branch.spacingX:20,this.branch.spacingY=a.branch.spacingY||0,this.arrow={},this.arrow.size=a.arrow.size||null,this.arrow.color=a.arrow.color||null,this.arrow.active="number"==typeof this.arrow.size,this.arrow.offset=a.arrow.offset||2,this.commit={},this.commit.spacingX=a.commit.spacingX||0,this.commit.spacingY="number"==typeof a.commit.spacingY?a.commit.spacingY:25,this.commit.widthExtension="number"==typeof a.commit.widthExtension?a.commit.widthExtension:0,this.commit.tooltipHTMLFormatter=a.commit.tooltipHTMLFormatter||null,this.commit.shouldDisplayTooltipsInCompactMode=i(a.commit.shouldDisplayTooltipsInCompactMode,!0),this.commit.color=a.commit.color||null,this.commit.dot={},this.commit.dot.color=a.commit.dot.color||null,this.commit.dot.size=a.commit.dot.size||3,this.commit.dot.strokeWidth=a.commit.dot.strokeWidth||null,this.commit.dot.strokeColor=a.commit.dot.strokeColor||null,this.commit.tag={},this.commit.tag.color=a.commit.tag.color||this.commit.dot.color,this.commit.tag.font=a.commit.tag.font||a.commit.message.font||"normal 10pt Calibri",this.commit.tag.spacingX=this.branch.spacingX,this.commit.tag.spacingY=this.commit.spacingY,this.commit.message={},this.commit.message.display=i(a.commit.message.display,!0),this.commit.message.displayAuthor=i(a.commit.message.displayAuthor,!0),this.commit.message.displayBranch=i(a.commit.message.displayBranch,!0),this.commit.message.displayHash=i(a.commit.message.displayHash,!0),this.commit.message.color=a.commit.message.color||null,this.commit.message.font=a.commit.message.font||"normal 12pt Calibri"}function i(a,b){return"boolean"==typeof a?a:b}function j(a,b,c,d,e,f,g,h){a.save(),a.translate(b,c),a.rotate(g*(Math.PI/180)),a.textAlign="center",a.font=f;var i=a.measureText(d).width,j=k(f);h?(a.beginPath(),a.rect(-(i/2)-4,-(j/2)+2,i+8,j+2),a.fillStyle=e,a.fill(),a.lineWidth=2,a.strokeStyle="black",a.stroke(),a.fillStyle="black"):a.fillStyle=e,a.fillText(d,0,j/2),a.restore()}e.prototype.branch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this,a.parentBranch=a.parentBranch||this.HEAD;var c=new f(a);return this.branches.push(c),c},e.prototype.orphanBranch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this;var c=new f(a);return this.branches.push(c),c},e.prototype.commit=function(a){return this.HEAD.commit(a),this},e.prototype.newTemplate=function(a){return"string"==typeof a?(new h).get(a):new h(a)},e.prototype.render=function(){this.scalingFactor=b(this.context);var c={x:Math.abs((this.columnMax+1)*this.template.branch.spacingX)+Math.abs(this.commitOffsetX)+2*this.marginX,y:Math.abs((this.columnMax+1)*this.template.branch.spacingY)+Math.abs(this.commitOffsetY)+2*this.marginY};this.template.commit.message.display&&(c.x+=800),c.x+=this.template.commit.widthExtension,this.canvas.style.width=c.x+"px",this.canvas.style.height=c.y+"px",this.canvas.width=c.x*this.scalingFactor,this.canvas.height=c.y*this.scalingFactor,this.context.clearRect(0,0,this.canvas.width,this.canvas.height),this.context.translate(this.marginX,this.marginY),this.template.commit.spacingY>0&&(this.context.translate(0,this.canvas.height-2*this.marginY),this.offsetY=this.canvas.height-2*this.marginY),this.template.commit.spacingX>0&&(this.context.translate(this.canvas.width-2*this.marginX,0),this.offsetX=this.canvas.width-2*this.marginX),this.context.scale(this.scalingFactor,this.scalingFactor);for(var d,e=this.branches.length-1;d=this.branches[e];e--)d.render();this.tagNum=0;for(var f,g=0;f=this.commits[g];g++)f.render();a(this.canvas,"graph:render",{id:this.elementId})},e.prototype.applyCommits=function(a,b){function c(a){var b=document.getElementById(a),c=b.getBoundingClientRect();return{top:c.top+document.body.scrollTop,left:c.left+document.body.scrollLeft}}for(var d,e=a.offsetX||a.pageX-c(this.elementId).left,f=a.offsetY||a.pageY-c(this.elementId).top,g=0;d=this.commits[g];g++){var h=d.x+(this.offsetX+this.marginX)/this.scalingFactor-e,i=d.y+(this.offsetY+this.marginY)/this.scalingFactor-f,j=Math.sqrt(Math.pow(h,2)+Math.pow(i,2)),k=j<this.template.commit.dot.size;b(d,k)}},e.prototype.hover=function(b){function c(a){"undefined"!=typeof InstallTrigger&&(b.x=b.x?b.x:b.clientX,b.y=b.y?b.y:b.clientY),e.tooltip.style.left=b.x+"px",e.tooltip.style.top=b.y+"px",null!==e.template.commit.tooltipHTMLFormatter?e.tooltip.innerHTML=e.template.commit.tooltipHTMLFormatter(a):e.tooltip.textContent=a.sha1+" - "+a.message,e.tooltip.style.display="block"}function d(b,c){var d={author:b.author,message:b.message,date:b.date,sha1:b.sha1};a(e.canvas,"commit:"+c,d)}var e=this.gitgraph,f=!0;e.applyCommits(b,function(a,b){b?(!e.template.commit.message.display&&e.template.commit.shouldDisplayTooltipsInCompactMode&&c(a),a.isMouseOver||d(a,"mouseover"),f=!1,a.isMouseOver=!0):(a.isMouseOver&&d(a,"mouseout"),a.isMouseOver=!1)}),f&&(e.tooltip.style.display="none")},e.prototype.click=function(a){this.gitgraph.applyCommits(a,function(a,b){b&&null!==a.onClick&&a.onClick(a,!0)})},f.prototype.branch=function(a){if("string"==typeof a){var b=a;a={},a.name=b}a="object"==typeof a?a:{},a.parent=this.parent,a.parentBranch=a.parentBranch||this;var c=new f(a);return this.parent.branches.push(c),c},f.prototype.render=function(){this.context.beginPath();for(var a,b=0;a=this.path[b];b++)if("start"===a.type)this.context.moveTo(a.x,a.y);else if("bezier"===this.template.branch.mergeStyle){var c=this.path[b-1];this.context.bezierCurveTo(c.x-this.template.commit.spacingX/2,c.y-this.template.commit.spacingY/2,a.x+this.template.commit.spacingX/2,a.y+this.template.commit.spacingY/2,a.x,a.y)}else this.context.lineTo(a.x,a.y);this.context.lineWidth=this.lineWidth,this.context.strokeStyle=this.color;var d;void 0!==this.context.setLineDash&&(d=this.context.getLineDash(),this.context.setLineDash(this.lineDash)),this.context.stroke(),this.context.closePath(),void 0!==d&&this.context.setLineDash(d)},f.prototype.commit=function(a){"string"==typeof a?a={message:a}:"object"!=typeof a&&(a={}),a.arrowDisplay=this.template.arrow.active,a.branch=this;var b=this.column%this.template.colors.length;a.color=a.color||this.template.commit.color||this.template.colors[b],a.parent=this.parent,a.parentCommit=a.parentCommit||this.commits.slice(-1)[0],"compact"===this.parent.mode&&this.parent.commits.slice(-1)[0]&&this.parent.commits.slice(-1)[0].branch!==a.branch&&a.branch.commits.length&&"mergeCommit"!==a.type&&(this.parent.commitOffsetX-=this.template.commit.spacingX,this.parent.commitOffsetY-=this.template.commit.spacingY),a.messageColor=a.messageColor||this.template.commit.message.color||a.color||null,a.labelColor=a.labelColor||this.template.branch.labelColor||a.color||null,a.tagColor=a.tagColor||this.template.commit.tag.color||a.color||null,a.dotColor=a.dotColor||this.template.commit.dot.color||a.color||null,a.x=this.offsetX-this.parent.commitOffsetX,a.y=this.offsetY-this.parent.commitOffsetY;var c="vertical"===this.parent.orientation,d="compact"!==this.parent.mode;a.detail="string"==typeof a.detailId&&c&&d?document.getElementById(a.detailId):null;var e=a.branch.commits.slice(-1)[0]||{},h=a.x+a.y,i=e.x+e.y,j=h===i;j&&(this.parent.commitOffsetX+=this.template.commit.spacingX,this.parent.commitOffsetY+=this.template.commit.spacingY,a.x=this.offsetX-this.parent.commitOffsetX,a.y=this.offsetY-this.parent.commitOffsetY),a.parentCommit instanceof g==!1&&this.parentBranch instanceof f&&(a.parentCommit=this.parentCommit);var k=!(a.parentCommit instanceof g),l=0===this.path.length;a.showLabel=l&&this.showLabel?!0:!1,a.showLabel&&(a.x-=this.template.commit.spacingX,a.y-=this.template.commit.spacingY);var m=new g(a);this.commits.push(m);var n={x:m.x,y:m.y,type:"join"};if(!k&&l){this.pushPath(this.startPoint),this.pushPath({x:this.startPoint.x-this.parentBranch.offsetX+this.offsetX-this.template.commit.spacingX,y:this.startPoint.y-this.parentBranch.offsetY+this.offsetY-this.template.commit.spacingY,type:"join"});var o=JSON.parse(JSON.stringify(this.startPoint));o.type="join",this.parentBranch.pushPath(o)}else l&&(n.type="start");return this.pushPath(n),this.parent.commitOffsetX+=this.template.commit.spacingX*(a.showLabel?2:1),this.parent.commitOffsetY+=this.template.commit.spacingY*(a.showLabel?2:1),null!==m.detail&&(m.detail.style.display="block",this.parent.commitOffsetY-=m.detail.clientHeight-40),this.parent.render(),this},f.prototype.checkout=function(){this.parent.HEAD=this},f.prototype.delete=function(){this.isfinish=!0},f.prototype.merge=function(a,b){var c=a||this.parent.HEAD;if(c instanceof f==!1||c===this)return this;var d="Merge branch `"+this.name+"` into `"+c.name+"`";if("object"!=typeof b){var e=b;b={},b.message="string"==typeof e?e:d}else b.message=b.message||d;b.type="mergeCommit",b.parentCommit=this.commits.slice(-1)[0],c.commit(b);var g=c.commits.slice(-1)[0],h={x:this.offsetX+this.template.commit.spacingX*(g.showLabel?3:2)-this.parent.commitOffsetX,y:this.offsetY+this.template.commit.spacingY*(g.showLabel?3:2)-this.parent.commitOffsetY,type:"join"};this.pushPath(JSON.parse(JSON.stringify(h)));var i={x:g.x,y:g.y,type:"end"};return this.pushPath(i),h.type="start",this.pushPath(h),this.parent.render(),this.parent.HEAD=c,this},f.prototype.calculColumn=function(){for(var a,b=[],c=0;a=this.parent.branches[c];c++)a.isfinish||(a.column in b||(b[a.column]=0),b[a.column]++);for(this.column=0;this.column in b&&0!==b[this.column];this.column++);},f.prototype.pushPath=function(a){var b=this.path.slice(-1)[0];b?b.x===a.x&&b.y===a.y?"start"!==b.type&&"end"===a.type?b.type="end":"join"===a.type||this.path.push(a):"join"===a.type?(a.x-b.x)*this.template.commit.spacingX<0?this.path.push(a):(a.y-b.y)*this.template.commit.spacingY<0&&this.path.push(a):this.path.push(a):this.path.push(a)},g.prototype.render=function(){this.showLabel&&j(this.context,this.x+this.template.commit.spacingX,this.y+this.template.commit.spacingY,this.branch.name,this.labelColor,this.labelFont,this.template.branch.labelRotation,!0),this.context.beginPath(),this.context.arc(this.x,this.y,this.dotSize,0,2*Math.PI,!1),this.context.fillStyle=this.dotColor,this.context.strokeStyle=this.dotStrokeColor,this.context.lineWidth=this.dotStrokeWidth,"number"==typeof this.dotStrokeWidth&&this.context.stroke(),this.context.fill(),this.context.closePath(),this.arrowDisplay&&this.parentCommit instanceof g&&this.arrow();var a=this.template.commit.tag.spacingX;if(null!==this.tag){this.parent.tagNum++,this.context.font=this.tagFont;var b=this.context.measureText(this.tag).width;if(0!==this.template.branch.labelRotation){var c=k(this.tagFont);j(this.context,this.x-this.dotSize/2,(this.parent.columnMax+1)*this.template.commit.tag.spacingY-this.template.commit.tag.spacingY/2+this.parent.tagNum%2*c*1.5,this.tag,this.tagColor,this.tagFont,0,this.displayTagBox)}else j(this.context,(this.parent.columnMax+1)*this.template.commit.tag.spacingX-this.template.commit.tag.spacingX/2+b/2,this.y-this.dotSize/2,this.tag,this.tagColor,this.tagFont,0,this.displayTagBox);a=b>a?b:a}this.context.font=this.messageFont;var d=(this.parent.columnMax+1)*this.template.branch.spacingX+a;if(null!==this.detail&&(this.detail.style.left=this.parent.canvas.offsetLeft+d+this.x+30+"px",this.detail.style.top=this.parent.canvas.offsetTop+this.y+40+"px",this.detail.width=30),this.messageDisplay){var e=this.message;this.messageHashDisplay&&(e=this.sha1+" "+e),this.messageAuthorDisplay&&(e+=this.author?" - "+this.author:""),this.messageBranchDisplay&&(e=(this.branch.name?"["+this.branch.name+"] ":"")+e),this.context.fillStyle=this.messageColor,this.context.fillText(e,d,this.y+this.dotSize/2)}},g.prototype.arrow=function(){function a(a,b){var c=f?-1:1;return Math.atan2(c*a,c*b)}var b=this.template.arrow.size,e=this.template.arrow.color||this.branch.color,f=this.parent.reverseArrow,g=a(this.parentCommit.y-this.y,this.parentCommit.x-this.x);if("mergeCommit"===this.type||this===this.branch.commits[0]){var h=this.parentCommit.branch.column-this.branch.column,i=this.showLabel?2:1,j=f&&c(this.parent)&&Math.abs(this.y-this.parentCommit.y)>Math.abs(this.template.commit.spacingY)||c(this.parent)&&i>1,k=j?0:this.template.branch.spacingX*h+this.template.commit.spacingX*i,l=f&&d(this.parent)&&Math.abs(this.x-this.parentCommit.x)>Math.abs(this.template.commit.spacingX)||d(this.parent)&&i>1,m=l?0:this.template.branch.spacingY*h+this.template.commit.spacingY*i;g=a(m,k),e=this.parentCommit.branch.color}var n=Math.PI/7,o=f?this.parentCommit.x:this.x,p=f?this.parentCommit.y:this.y,q=this.template.commit.dot.size+this.template.arrow.offset,r=q*Math.cos(g)+o,s=q*Math.sin(g)+p,t=(q+b)*Math.cos(g-n)+o,u=(q+b)*Math.sin(g-n)+p,v=(q+b/2)*Math.cos(g)+o,w=(q+b/2)*Math.sin(g)+p,x=(q+b)*Math.cos(g+n)+o,y=(q+b)*Math.sin(g+n)+p;this.context.beginPath(),this.context.fillStyle=e,this.context.moveTo(r,s),this.context.lineTo(t,u),this.context.quadraticCurveTo(v,w,x,y),this.context.lineTo(x,y),this.context.fill()},h.prototype.get=function(a){var b={};switch(a){case"blackarrow":b={branch:{color:"#000000",lineWidth:4,spacingX:50,mergeStyle:"straight"},commit:{spacingY:-60,dot:{size:12,strokeColor:"#000000",strokeWidth:7},message:{color:"black"}},arrow:{size:16,offset:2.5}};break;case"metro":default:b={colors:["#979797","#008fb5","#f1c109"],branch:{lineWidth:10,spacingX:50},commit:{spacingY:-80,dot:{size:14},message:{font:"normal 14pt Arial"}}}}return new h(b)};var k=function(a){var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d=document.createTextNode("Mg");c.appendChild(d),c.setAttribute("style","font: "+a+";"),b.appendChild(c);var e=c.offsetHeight;return b.removeChild(c),e};window.GitGraph=e,window.GitGraph.Branch=f,window.GitGraph.Commit=g,window.GitGraph.Template=h}();
\ No newline at end of file
diff --git a/docs/Branch.html b/docs/Branch.html
index 7e735925..84b0c69d 100644
--- a/docs/Branch.html
+++ b/docs/Branch.html
@@ -324,7 +324,7 @@ <h6>Properties</h6>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line492">line 492</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line502">line 502</a>
     </li></ul></dd>
     
     
@@ -465,7 +465,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line581">line 581</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line591">line 591</a>
     </li></ul></dd>
     
     
@@ -566,7 +566,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line856">line 856</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line866">line 866</a>
     </li></ul></dd>
     
     
@@ -638,7 +638,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line776">line 776</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line786">line 786</a>
     </li></ul></dd>
     
     
@@ -833,7 +833,7 @@ <h6>Properties</h6>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line655">line 655</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line665">line 665</a>
     </li></ul></dd>
     
     
@@ -912,7 +912,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line785">line 785</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line795">line 795</a>
     </li></ul></dd>
     
     
@@ -1092,7 +1092,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line799">line 799</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line809">line 809</a>
     </li></ul></dd>
     
     
@@ -1187,7 +1187,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line881">line 881</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line891">line 891</a>
     </li></ul></dd>
     
     
@@ -1259,7 +1259,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line606">line 606</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line616">line 616</a>
     </li></ul></dd>
     
     
@@ -1306,7 +1306,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/Commit.html b/docs/Commit.html
index 65c43190..0cfc387f 100644
--- a/docs/Commit.html
+++ b/docs/Commit.html
@@ -1296,7 +1296,7 @@ <h6>Properties</h6>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line954">line 954</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line964">line 964</a>
     </li></ul></dd>
     
     
@@ -1386,7 +1386,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1085">line 1085</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1095">line 1095</a>
     </li></ul></dd>
     
     
@@ -1458,7 +1458,7 @@ <h5>This:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1004">line 1004</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1014">line 1014</a>
     </li></ul></dd>
     
     
@@ -1505,7 +1505,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/GitGraph.html b/docs/GitGraph.html
index 0aa320ae..53547f24 100644
--- a/docs/GitGraph.html
+++ b/docs/GitGraph.html
@@ -946,7 +946,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line463">line 463</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line473">line 473</a>
     </li></ul></dd>
     
     
@@ -1215,7 +1215,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line397">line 397</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line407">line 407</a>
     </li></ul></dd>
     
     
@@ -1624,7 +1624,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/Template.html b/docs/Template.html
index 6cd1053d..d8eed500 100644
--- a/docs/Template.html
+++ b/docs/Template.html
@@ -1093,7 +1093,7 @@ <h6>Properties</h6>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1201">line 1201</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1211">line 1211</a>
     </li></ul></dd>
     
     
@@ -1228,7 +1228,7 @@ <h5>Parameters:</h5>
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1281">line 1281</a>
+        <a href="gitgraph.js.html">gitgraph.js</a>, <a href="gitgraph.js.html#line1291">line 1291</a>
     </li></ul></dd>
     
     
@@ -1297,7 +1297,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/gitgraph.js.html b/docs/gitgraph.js.html
index 2738f2e4..a26a346e 100644
--- a/docs/gitgraph.js.html
+++ b/docs/gitgraph.js.html
@@ -401,8 +401,18 @@ <h1 class="page-title">Source: gitgraph.js</h1>
    **/
   GitGraph.prototype.applyCommits = function ( event, callbackFn ) {
     // Fallback onto layerX/layerY for older versions of Firefox.
-    var offsetX = event.offsetX || event.layerX;
-    var offsetY = event.offsetY || event.layerY;
+    function getOffsetById ( id ) {
+      var el = document.getElementById( id );
+      var rect = el.getBoundingClientRect();
+
+      return {
+        top: rect.top + document.body.scrollTop,
+        left: rect.left + document.body.scrollLeft
+      };
+    }
+
+    var offsetX = event.offsetX || (event.pageX - getOffsetById( this.elementId ).left);
+    var offsetY = event.offsetY || (event.pageY - getOffsetById( this.elementId ).top);
 
     for ( var i = 0, commit; !!(commit = this.commits[ i ]); i++ ) {
       var distanceX = (commit.x + (this.offsetX + this.marginX) / this.scalingFactor - offsetX);
@@ -1430,7 +1440,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/global.html b/docs/global.html
index 9f7bda6c..49010683 100644
--- a/docs/global.html
+++ b/docs/global.html
@@ -867,7 +867,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/docs/index.html b/docs/index.html
index 5fbd01df..e398d520 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -115,7 +115,7 @@ <h2><a href="index.html">Index</a></h2><h3>Classes</h3><ul><li><a href="Branch.h
 <br clear="both">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Mon Aug 08 2016 19:11:55 GMT+0200 (CEST)
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.2.2</a> on Thu Sep 01 2016 11:56:54 GMT+0200 (CEST)
 </footer>
 
 <script> prettyPrint(); </script>
diff --git a/package.json b/package.json
index 592374f2..2e1aff88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gitgraph.js",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "author": "Nicolas Carlo <nicolascarlo.espeon@gmail.com>",
   "description": "A JavaScript library to draw pretty git graphs in the browser",
   "contributors": [
diff --git a/src/gitgraph.js b/src/gitgraph.js
index 751d1a1b..33119b09 100644
--- a/src/gitgraph.js
+++ b/src/gitgraph.js
@@ -374,8 +374,18 @@
    **/
   GitGraph.prototype.applyCommits = function ( event, callbackFn ) {
     // Fallback onto layerX/layerY for older versions of Firefox.
-    var offsetX = event.offsetX || event.layerX;
-    var offsetY = event.offsetY || event.layerY;
+    function getOffsetById ( id ) {
+      var el = document.getElementById( id );
+      var rect = el.getBoundingClientRect();
+
+      return {
+        top: rect.top + document.body.scrollTop,
+        left: rect.left + document.body.scrollLeft
+      };
+    }
+
+    var offsetX = event.offsetX || (event.pageX - getOffsetById( this.elementId ).left);
+    var offsetY = event.offsetY || (event.pageY - getOffsetById( this.elementId ).top);
 
     for ( var i = 0, commit; !!(commit = this.commits[ i ]); i++ ) {
       var distanceX = (commit.x + (this.offsetX + this.marginX) / this.scalingFactor - offsetX);