Fix bar border artifacts (#6972)

diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js
index c4ad49a9ec95c4d01a531d15e4c3cb7bce359c7a..85d957a5220bdfa8fb771558cf742c0fd4b0146c 100644 (file)
--- a/src/elements/element.rectangle.js
+++ b/src/elements/element.rectangle.js
@@ -135,25 +135,23 @@ class Rectangle extends Element {
        }
 
        draw(ctx) {
-               var options = this.options;
-               var rects = boundingRects(this);
-               var outer = rects.outer;
-               var inner = rects.inner;
+               const options = this.options;
+               const {inner, outer} = boundingRects(this);
 
-               ctx.fillStyle = options.backgroundColor;
-               ctx.fillRect(outer.x, outer.y, outer.w, outer.h);
+               ctx.save();
 
-               if (outer.w === inner.w && outer.h === inner.h) {
-                       return;
+               if (outer.w !== inner.w || outer.h !== inner.h) {
+                       ctx.beginPath();
+                       ctx.rect(outer.x, outer.y, outer.w, outer.h);
+                       ctx.clip();
+                       ctx.rect(inner.x, inner.y, inner.w, inner.h);
+                       ctx.fillStyle = options.borderColor;
+                       ctx.fill('evenodd');
                }
 
-               ctx.save();
-               ctx.beginPath();
-               ctx.rect(outer.x, outer.y, outer.w, outer.h);
-               ctx.clip();
-               ctx.fillStyle = options.borderColor;
-               ctx.rect(inner.x, inner.y, inner.w, inner.h);
-               ctx.fill('evenodd');
+               ctx.fillStyle = options.backgroundColor;
+               ctx.fillRect(inner.x, inner.y, inner.w, inner.h);
+
                ctx.restore();
        }
 

diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png
index d6a10eab0955b3444a4715d65b3835baa5b6b6b8..1cd6913acfc05dee86e993471c3b7abb9302f706 100644 (file)
Binary files a/test/fixtures/controller.bar/horizontal-borders.png and b/test/fixtures/controller.bar/horizontal-borders.png differ