--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -208,21 +208,16 @@ AnimationDetails.prototype = {
         attributes: {"class": "track-container"}
       });
 
       let framesEl = createNode({
         parent: framesWrapperEl,
         attributes: {"class": "frames"}
       });
 
-      // Scale the list of keyframes according to the current time scale.
-      let {x, w} = TimeScale.getAnimationDimensions(animation);
-      framesEl.style.left = `${x}%`;
-      framesEl.style.width = `${w}%`;
-
       let keyframesComponent = new Keyframes();
       keyframesComponent.init(framesEl);
       keyframesComponent.render({
         keyframes: this.tracks[propertyName],
         propertyName: propertyName,
         animation: animation,
         animationType: animationTypes[propertyName]
       });

--- a/devtools/client/animationinspector/components/keyframes.js
+++ b/devtools/client/animationinspector/components/keyframes.js
@@ -44,21 +44,16 @@ Keyframes.prototype = {
     this.containerEl = this.keyframesEl = this.animation = null;
   },
 
   render: function ({keyframes, propertyName, animation, animationType}) {
     this.keyframes = keyframes;
     this.propertyName = propertyName;
     this.animation = animation;
 
-    let iterationStartOffset =
-      animation.state.iterationStart % 1 == 0
-      ? 0
-      : 1 - animation.state.iterationStart % 1;
-
     // Create graph element.
     const graphEl = createSVGNode({
       parent: this.keyframesEl,
       nodeType: "svg",
       attributes: {
         "preserveAspectRatio": "none"
       }
     });
@@ -88,22 +83,21 @@ Keyframes.prototype = {
                         DEFAULT_MIN_PROGRESS_THRESHOLD, graphHelper);
 
     // Destroy ProgressGraphHelper resources.
     graphHelper.destroy();
 
     // Append elements to display keyframe values.
     this.keyframesEl.classList.add(animation.state.type);
     for (let frame of this.keyframes) {
-      let offset = frame.offset + iterationStartOffset;
       createNode({
         parent: this.keyframesEl,
         attributes: {
           "class": "frame",
-          "style": `left:${offset * 100}%;`,
+          "style": `left:${frame.offset * 100}%;`,
           "data-offset": frame.offset,
           "data-property": propertyName,
           "title": frame.value
         }
       });
     }
   },
 

--- a/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_iterationStart.js
@@ -56,16 +56,15 @@ function checkProgressAtStartingTime(el,
   const progress = pathSeg.y;
   is(progress, iterationStart % 1,
      `The progress at starting point should be ${ iterationStart % 1 }`);
 }
 
 function checkKeyframeOffset(timeBlockEl, frameEl, {iterationStart}) {
   info("Check that the first keyframe is offset correctly");
 
-  let start = getIterationStartFromLeft(frameEl);
-  is(start, iterationStart % 1, "The frame offset for iteration start");
+  let start = getKeyframeOffset(frameEl);
+  is(start, 0, "The frame offset for iteration start");
 }
 
-function getIterationStartFromLeft(el) {
-  let left = 100 - parseFloat(/(\d+)%/.exec(el.style.left)[1]);
-  return left / 100;
+function getKeyframeOffset(el) {
+  return parseFloat(/(\d+)%/.exec(el.style.left)[1]);
 }

--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -585,17 +585,19 @@ body {
 }
 
 .animation-timeline .animated-properties .frames {
   /* The frames list is absolutely positioned and the left and width properties
      are dynamically set from javascript to match the animation's startTime and
      duration */
   position: absolute;
   top: 0;
+  left: 0;
   height: 100%;
+  width: 100%;
   /* Using flexbox to vertically center the frames */
   display: flex;
   align-items: center;
 }
 
 /* Keyframes diagram, displayed below the timeline, inside the animation-details
    element. */