--- a/dom/animation/KeyframeUtils.cpp
+++ b/dom/animation/KeyframeUtils.cpp
@@ -1342,17 +1342,18 @@ BuildSegmentsFromValueEntries(nsTArray<K
 
     // Starting from i, determine the next [i, j] interval from which to
     // generate a segment.
     size_t j;
     if (aEntries[i].mOffset == 0.0f && aEntries[i + 1].mOffset == 0.0f) {
       // We need to generate an initial zero-length segment.
       MOZ_ASSERT(aEntries[i].mProperty == aEntries[i + 1].mProperty);
       j = i + 1;
-      while (aEntries[j + 1].mOffset == 0.0f &&
+      while (j + 1 < n &&
+             aEntries[j + 1].mOffset == 0.0f &&
              aEntries[j + 1].mProperty == aEntries[j].mProperty) {
         ++j;
       }
     } else if (aEntries[i].mOffset == 1.0f) {
       if (aEntries[i + 1].mOffset == 1.0f &&
           aEntries[i + 1].mProperty == aEntries[i].mProperty) {
         // We need to generate a final zero-length segment.
         j = i + 1;

--- a/dom/animation/test/chrome/test_animation_properties.html
+++ b/dom/animation/test/chrome/test_animation_properties.html
@@ -784,29 +784,59 @@ var gTests = [
   },
   { desc:     'missing properties in both of initial and final keyframe',
     frames:   [ { left: '5px', offset: 0.5 } ],
     expected: [ { property: 'left',
                   values: [ value(0,   undefined, 'add',     'linear'),
                             value(0.5, '5px',       'replace', 'linear'),
                             value(1,   undefined, 'add') ] } ]
   },
-  { desc:     'missing propertes in both of initial and final keyframe along'
+  { desc:     'missing propertes in both of initial and final keyframe along '
               + 'with other values',
     frames:   [ { left:  '5px',  offset: 0 },
                 { right: '5px',  offset: 0.5 },
                 { left:  '10px', offset: 1 } ],
     expected: [ { property: 'left',
                   values: [ value(0, '5px',  'replace', 'linear'),
                             value(1, '10px', 'replace') ] },
                 { property: 'right',
                   values: [ value(0,   undefined, 'add',     'linear'),
                             value(0.5, '5px',     'replace', 'linear'),
                             value(1,   undefined, 'add') ] } ]
   },
+
+  { desc:     'a missing property in final keyframe with duplicate offset ' +
+              + 'along with other values',
+    frames:   [ { left: '5px',  right: '5px', offset: 0 },
+                { left: '8px',  right: '8px', offset: 0 },
+                { left: '10px',               offset: 1 } ],
+    expected: [ { property: 'left',
+                  values: [ value(0, '5px',  'replace'),
+                            value(0, '8px',  'replace', 'linear'),
+                            value(1, '10px', 'replace') ] },
+                { property: 'right',
+                  values: [ value(0, '5px',     'replace'),
+                            value(0, '8px',     'replace', 'linear'),
+                            value(1, undefined, 'add') ] } ]
+  },
+
+  { desc:     'a missing property in initial keyframe with duplicate offset '
+              + 'along with other values',
+    frames:   [ { left: '10px',              offset: 0 },
+                { left: '8px', right: '8px', offset: 1 },
+                { left: '5px', right: '5px', offset: 1 } ],
+    expected: [ { property: 'left',
+                  values: [ value(0, '10px', 'replace', 'linear'),
+                            value(1, '8px',  'replace'),
+                            value(1, '5px',  'replace') ] },
+                { property: 'right',
+                  values: [ value(0, undefined, 'add', 'linear'),
+                            value(1, '8px',     'replace'),
+                            value(1, '5px',     'replace') ] } ]
+  },
 ];
 
 SpecialPowers.pushPrefEnv(
   { set: [["dom.animations-api.core.enabled", true]] },
   function() {
     gTests.forEach(function(subtest) {
       test(function(t) {
         var div = addDiv(t);

new file mode 100644
--- /dev/null
+++ b/dom/animation/test/crashtests/1333418-1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<script>
+window.onload = function(){
+  let body = document.getElementsByTagName("body")[0];
+  let o = new KeyframeEffect(body, [
+    { "perspective": "none", "width": "auto" },
+    { "perspective": "172.17866832in", "width": "auto" },
+    { "perspective": "0" }],
+    { spacing:"paced(perspective)" }
+  );
+};
+</script>
+</head>
+<body></body>
+</html>

--- a/dom/animation/test/crashtests/crashtests.list
+++ b/dom/animation/test/crashtests/crashtests.list
@@ -16,8 +16,9 @@ pref(dom.animations-api.core.enabled,tru
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1322291-1.html # bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1322291-2.html # bug 1311257 and bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1323114-1.html # bug 1324690 and bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1323114-2.html # bug 1324690
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1325193-1.html # bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1330190-1.html # bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1330190-2.html # bug 1311257
 skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1330513-1.html # bug 1311257
+skip-if(stylo) pref(dom.animations-api.core.enabled,true) load 1333418-1.html # bug 1311257