--- a/devtools/client/animationinspector/components/animation-timeline.js
+++ b/devtools/client/animationinspector/components/animation-timeline.js
@@ -164,16 +164,21 @@ AnimationsTimeline.prototype = {
     this.destroySubComponents("details", [{
       event: "frame-selected",
       fn: this.onFrameSelected
     }]);
     this.animationsEl.innerHTML = "";
   },
 
   onWindowResize: function() {
+    // Don't do anything if the root element has a width of 0
+    if (this.rootWrapperEl.offsetWidth === 0) {
+      return;
+    }
+
     if (this.windowResizeTimer) {
       this.win.clearTimeout(this.windowResizeTimer);
     }
 
     this.windowResizeTimer = this.win.setTimeout(() => {
       this.drawHeaderAndBackground();
     }, TIMELINE_BACKGROUND_RESIZE_DEBOUNCE_TIMER);
   },

--- a/devtools/client/animationinspector/utils.js
+++ b/devtools/client/animationinspector/utils.js
@@ -73,16 +73,21 @@ exports.createNode = createNode;
  * @param {String} id The ID for the image-element.
  * @param {Number} graphWidth The width of the graph.
  * @param {Number} intervalWidth The width of one interval
  */
 function drawGraphElementBackground(document, id, graphWidth, intervalWidth) {
   let canvas = document.createElement("canvas");
   let ctx = canvas.getContext("2d");
 
+  // Don't do anything if the graph or the intervals have a width of 0
+  if (graphWidth === 0 || intervalWidth === 0) {
+    return;
+  }
+
   // Set the canvas width (as requested) and height (1px, repeated along the Y
   // axis).
   canvas.width = graphWidth;
   canvas.height = 1;
 
   // Create the image data array which will receive the pixels.
   let imageData = ctx.createImageData(canvas.width, canvas.height);
   let pixelArray = imageData.data;