diff --git a/src/ol/render/canvas/PolygonReplay.js b/src/ol/render/canvas/PolygonReplay.js
index 7029fddd81..a1ee906790 100644
--- a/src/ol/render/canvas/PolygonReplay.js
+++ b/src/ol/render/canvas/PolygonReplay.js
@@ -216,7 +216,7 @@ _ol_render_canvas_PolygonReplay_.prototype.setFillStrokeStyles_ = function(geome
   var state = this.state;
   var fillStyle = state.fillStyle;
   if (fillStyle !== undefined) {
-    this.updateFillStyle(state, this.applyFill, geometry);
+    this.updateFillStyle(state, this.createFill, geometry);
   }
   if (state.strokeStyle !== undefined) {
     this.updateStrokeStyle(state, this.applyStroke);
diff --git a/src/ol/render/canvas/Replay.js b/src/ol/render/canvas/Replay.js
index c83fe1fea3..cd4264e15c 100644
--- a/src/ol/render/canvas/Replay.js
+++ b/src/ol/render/canvas/Replay.js
@@ -268,7 +268,10 @@ _ol_render_canvas_Replay_.prototype.replayImage_ = function(context, x, y, image
     createOrUpdate(boxX, boxY, boxX + boxW, boxY + boxH, box);
   }
   var canvas = context.canvas;
-  var intersects = box[0] <= canvas.width && box[2] >= 0 && box[1] <= canvas.height && box[3] >= 0;
+  var strokePadding = strokeInstruction ? (strokeInstruction[2] * scale / 2) : 0;
+  var intersects =
+      box[0] - strokePadding <= canvas.width && box[2] + strokePadding >= 0 &&
+      box[1] - strokePadding <= canvas.height && box[3] + strokePadding >= 0;
 
   if (snapToPixel) {
     x = Math.round(x);
@@ -960,15 +963,16 @@ _ol_render_canvas_Replay_.prototype.setFillStrokeStyle = function(fillStyle, str
 /**
  * @param {ol.CanvasFillStrokeState} state State.
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
+ * @return {Array.<*>} Fill instruction.
  */
-_ol_render_canvas_Replay_.prototype.applyFill = function(state, geometry) {
+_ol_render_canvas_Replay_.prototype.createFill = function(state, geometry) {
   var fillStyle = state.fillStyle;
   var fillInstruction = [_ol_render_canvas_Instruction_.SET_FILL_STYLE, fillStyle];
   if (typeof fillStyle !== 'string') {
     var fillExtent = geometry.getExtent();
     fillInstruction.push([fillExtent[0], fillExtent[3]]);
   }
-  this.instructions.push(fillInstruction);
+  return fillInstruction;
 };
 
 
@@ -976,25 +980,34 @@ _ol_render_canvas_Replay_.prototype.applyFill = function(state, geometry) {
  * @param {ol.CanvasFillStrokeState} state State.
  */
 _ol_render_canvas_Replay_.prototype.applyStroke = function(state) {
-  this.instructions.push([
-    _ol_render_canvas_Instruction_.SET_STROKE_STYLE,
-    state.strokeStyle, state.lineWidth * this.pixelRatio, state.lineCap,
-    state.lineJoin, state.miterLimit,
-    this.applyPixelRatio(state.lineDash), state.lineDashOffset * this.pixelRatio
-  ]);
+  this.instructions.push(this.createStroke(state));
 };
 
 
 /**
  * @param {ol.CanvasFillStrokeState} state State.
- * @param {function(this:ol.render.canvas.Replay, ol.CanvasFillStrokeState, (ol.geom.Geometry|ol.render.Feature))} applyFill Apply fill.
+ * @return {Array.<*>} Stroke instruction.
+ */
+_ol_render_canvas_Replay_.prototype.createStroke = function(state) {
+  return [
+    _ol_render_canvas_Instruction_.SET_STROKE_STYLE,
+    state.strokeStyle, state.lineWidth * this.pixelRatio, state.lineCap,
+    state.lineJoin, state.miterLimit,
+    this.applyPixelRatio(state.lineDash), state.lineDashOffset * this.pixelRatio
+  ];
+};
+
+
+/**
+ * @param {ol.CanvasFillStrokeState} state State.
+ * @param {function(this:ol.render.canvas.Replay, ol.CanvasFillStrokeState, (ol.geom.Geometry|ol.render.Feature)):Array.<*>} createFill Create fill.
  * @param {ol.geom.Geometry|ol.render.Feature} geometry Geometry.
  */
-_ol_render_canvas_Replay_.prototype.updateFillStyle = function(state, applyFill, geometry) {
+_ol_render_canvas_Replay_.prototype.updateFillStyle = function(state, createFill, geometry) {
   var fillStyle = state.fillStyle;
   if (typeof fillStyle !== 'string' || state.currentFillStyle != fillStyle) {
     if (fillStyle !== undefined) {
-      applyFill.call(this, state, geometry);
+      this.instructions.push(createFill.call(this, state, geometry));
     }
     state.currentFillStyle = fillStyle;
   }
diff --git a/src/ol/render/canvas/TextReplay.js b/src/ol/render/canvas/TextReplay.js
index 75d2673114..ef4d2e286d 100644
--- a/src/ol/render/canvas/TextReplay.js
+++ b/src/ol/render/canvas/TextReplay.js
@@ -264,8 +264,10 @@ _ol_render_canvas_TextReplay_.prototype.drawText = function(geometry, feature) {
     this.beginGeometry(geometry, feature);
     if (textState.backgroundFill || textState.backgroundStroke) {
       this.setFillStrokeStyle(textState.backgroundFill, textState.backgroundStroke);
-      this.updateFillStyle(this.state, this.applyFill, geometry);
+      this.updateFillStyle(this.state, this.createFill, geometry);
+      this.hitDetectionInstructions.push(this.createFill(this.state, geometry));
       this.updateStrokeStyle(this.state, this.applyStroke);
+      this.hitDetectionInstructions.push(this.createStroke(this.state));
     }
     this.drawTextImage_(label, begin, end);
     this.endGeometry(geometry, feature);
diff --git a/test/rendering/ol/style/text.test.js b/test/rendering/ol/style/text.test.js
index 1a570fcdb2..9736575216 100644
--- a/test/rendering/ol/style/text.test.js
+++ b/test/rendering/ol/style/text.test.js
@@ -352,6 +352,9 @@ describe('ol.rendering.style.Text', function() {
       }));
       features[2].getStyle().getText().setPadding([5, 10, 15, 0]);
       map.getView().fit(vectorSource.getExtent());
+      map.once('postrender', function() {
+        expect(map.getFeaturesAtPixel([178, 120])).to.have.length(1);
+      });
       expectResemble(map, 'rendering/ol/style/expected/text-background.png', IMAGE_TOLERANCE, done);
     });