diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js
index 4ea2b74514..79197b7c29 100644
--- a/src/ol/renderer/dom/domimagelayerrenderer.js
+++ b/src/ol/renderer/dom/domimagelayerrenderer.js
@@ -104,6 +104,10 @@ ol.renderer.dom.ImageLayer.prototype.renderFrame =
         0);
     if (image != this.image_) {
       var imageElement = image.getImageElement(this);
+      // Bootstrap sets the style max-width: 100% for all images, which breaks
+      // prevents the image from being displayed in FireFox.  Workaround by
+      // overriding the max-width style.
+      imageElement.style.maxWidth = 'none';
       imageElement.style.position = 'absolute';
       goog.dom.removeChildren(this.target);
       goog.dom.appendChild(this.target, imageElement);
diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js
index bc611f4b92..6f26c0efe7 100644
--- a/src/ol/renderer/dom/domtilelayerrenderer.js
+++ b/src/ol/renderer/dom/domtilelayerrenderer.js
@@ -315,6 +315,10 @@ ol.renderer.dom.TileLayerZ_.prototype.addTile = function(tile) {
   var tileSize = this.tileGrid_.getTileSize(tileCoord.z);
   var image = tile.getImage(this);
   var style = image.style;
+  // Bootstrap sets the style max-width: 100% for all images, which breaks
+  // prevents the tile from being displayed in FireFox.  Workaround by
+  // overriding the max-width style.
+  style.maxWidth = 'none';
   style.position = 'absolute';
   style.left =
       ((tileCoord.x - this.tileCoordOrigin_.x) * tileSize.width) + 'px';