diff --git a/airflow/www/templates/airflow/tree.html b/airflow/www/templates/airflow/tree.html
index 1c05afe53f27db..7c077397e0ae48 100644
--- a/airflow/www/templates/airflow/tree.html
+++ b/airflow/www/templates/airflow/tree.html
@@ -81,14 +81,15 @@
 <script>
 $('span.status_square').tooltip({html: true});
 
+var devicePixelRatio = window.devicePixelRatio || 1;
 var data = {{ data|tojson|safe }};
 var barHeight = 20;
 var axisHeight = 40;
-var square_x = 500;
+var square_x = parseInt(500 * devicePixelRatio);
 var square_size = 10;
 var square_spacing = 2;
 var margin = {top: barHeight/2 + axisHeight, right: 0, bottom: 0, left: barHeight/2},
-    width = 960 - margin.left - margin.right,
+    width = parseInt(960 * devicePixelRatio) - margin.left - margin.right,
     barWidth = width * 0.9;
 
 var i = 0,
diff --git a/airflow/www_rbac/templates/airflow/tree.html b/airflow/www_rbac/templates/airflow/tree.html
index 14d66147a9a850..739c6af71e611e 100644
--- a/airflow/www_rbac/templates/airflow/tree.html
+++ b/airflow/www_rbac/templates/airflow/tree.html
@@ -82,14 +82,15 @@
 <script>
 $('span.status_square').tooltip({html: true});
 
+var devicePixelRatio = window.devicePixelRatio || 1;
 var data = {{ data|tojson|safe }};
 var barHeight = 20;
 var axisHeight = 40;
-var square_x = 500;
+var square_x = parseInt(500 * devicePixelRatio);
 var square_size = 10;
 var square_spacing = 2;
 var margin = {top: barHeight/2 + axisHeight, right: 0, bottom: 0, left: barHeight/2},
-    width = 960 - margin.left - margin.right,
+    width = parseInt(960 * devicePixelRatio) - margin.left - margin.right,
     barWidth = width * 0.9;
 
 var i = 0,