--- a/devtools/server/actors/stylesheets.js
+++ b/devtools/server/actors/stylesheets.js
@@ -18,30 +18,34 @@ const {SourceMapConsumer} = require("sou
 const {
   addPseudoClassLock, removePseudoClassLock } = require("devtools/server/actors/highlighters/utils/markup");
 
 loader.lazyRequireGetter(this, "CssLogic", "devtools/shared/inspector/css-logic");
 loader.lazyRequireGetter(this, "addPseudoClassLock",
   "devtools/server/actors/highlighters/utils/markup", true);
 loader.lazyRequireGetter(this, "removePseudoClassLock",
   "devtools/server/actors/highlighters/utils/markup", true);
+loader.lazyRequireGetter(this, "loadSheet", "devtools/shared/layout/utils", true);
 
 loader.lazyServiceGetter(this, "DOMUtils", "@mozilla.org/inspector/dom-utils;1", "inIDOMUtils");
 
 var TRANSITION_PSEUDO_CLASS = ":-moz-styleeditor-transitioning";
 var TRANSITION_DURATION_MS = 500;
 var TRANSITION_BUFFER_MS = 1000;
 var TRANSITION_RULE_SELECTOR =
 `:root${TRANSITION_PSEUDO_CLASS}, :root${TRANSITION_PSEUDO_CLASS} *`;
-var TRANSITION_RULE = `${TRANSITION_RULE_SELECTOR} {
-  transition-duration: ${TRANSITION_DURATION_MS}ms !important;
-  transition-delay: 0ms !important;
-  transition-timing-function: ease-out !important;
-  transition-property: all !important;
-}`;
+
+var TRANSITION_SHEET = "data:text/css;charset=utf-8," + encodeURIComponent(`
+  ${TRANSITION_RULE_SELECTOR} {
+    transition-duration: ${TRANSITION_DURATION_MS}ms !important;
+    transition-delay: 0ms !important;
+    transition-timing-function: ease-out !important;
+    transition-property: all !important;
+  }
+`)
 
 // The possible kinds of style-applied events.
 // UPDATE_PRESERVING_RULES means that the update is guaranteed to
 // preserve the number and order of rules on the style sheet.
 // UPDATE_GENERAL covers any other kind of change to the style sheet.
 const UPDATE_PRESERVING_RULES = 0;
 exports.UPDATE_PRESERVING_RULES = UPDATE_PRESERVING_RULES;
 const UPDATE_GENERAL = 1;
@@ -720,58 +724,56 @@ var StyleSheetActor = protocol.ActorClas
 
     modifiedStyleSheets.set(this.rawSheet, text);
 
     this.text = text;
 
     this._notifyPropertyChanged("ruleCount");
 
     if (transition) {
-      this._insertTransistionRule(kind);
+      this._startTransition(kind);
     } else {
       this.emit("style-applied", kind, this);
     }
 
     this._getMediaRules().then((rules) => {
       this.emit("media-rules-changed", rules);
     });
   },
 
   /**
-   * Insert a catch-all transition rule into the document. Set a timeout
-   * to remove the rule after a certain time.
+   * Insert a catch-all transition sheet into the document. Set a timeout
+   * to remove the transition after a certain time.
    */
-  _insertTransistionRule: function (kind) {
-    addPseudoClassLock(this.document.documentElement, TRANSITION_PSEUDO_CLASS);
+  _startTransition: function (kind) {
+    if (!this._transitionSheetLoaded) {
+      this._transitionSheetLoaded = true;
+      // We don't remove this sheet. It uses an internal selector that
+      // we only apply via locks, so there's no need to load and unload
+      // it all the time.
+      loadSheet(this.window, TRANSITION_SHEET);
+    }
 
-    // We always add the rule since we've just reset all the rules
-    this.rawSheet.insertRule(TRANSITION_RULE, this.rawSheet.cssRules.length);
+    addPseudoClassLock(this.document.documentElement, TRANSITION_PSEUDO_CLASS);
 
     // Set up clean up and commit after transition duration (+buffer)
     // @see _onTransitionEnd
     this.window.clearTimeout(this._transitionTimeout);
     this._transitionTimeout = this.window.setTimeout(
       this._onTransitionEnd.bind(this, kind),
       TRANSITION_DURATION_MS + TRANSITION_BUFFER_MS);
   },
 
   /**
    * This cleans up class and rule added for transition effect and then
    * notifies that the style has been applied.
    */
   _onTransitionEnd: function (kind) {
     this._transitionTimeout = null;
     removePseudoClassLock(this.document.documentElement, TRANSITION_PSEUDO_CLASS);
-
-    let index = this.rawSheet.cssRules.length - 1;
-    let rule = this.rawSheet.cssRules[index];
-    if (rule.selectorText == TRANSITION_RULE_SELECTOR) {
-      this.rawSheet.deleteRule(index);
-    }
-
     this.emit("style-applied", kind, this);
   }
 });
 
 exports.StyleSheetActor = StyleSheetActor;
 
 /**
  * Creates a StyleSheetsActor. StyleSheetsActor provides remote access to the
@@ -799,16 +801,17 @@ var StyleSheetsActor = protocol.ActorCla
   initialize: function (conn, tabActor) {
     protocol.Actor.prototype.initialize.call(this, null);
 
     this.parentActor = tabActor;
 
     this._onNewStyleSheetActor = this._onNewStyleSheetActor.bind(this);
     this._onSheetAdded = this._onSheetAdded.bind(this);
     this._onWindowReady = this._onWindowReady.bind(this);
+    this._transitionSheetLoaded = false;
 
     this.parentActor.on("stylesheet-added", this._onNewStyleSheetActor);
     this.parentActor.on("window-ready", this._onWindowReady);
 
     // We listen for StyleSheetApplicableStateChanged rather than
     // StyleSheetAdded, because the latter will be sent before the
     // rules are ready.  Using the former (with a check to ensure that
     // the sheet is enabled) ensures that the sheet is ready before we