title: IE / Edge CSS3 Transitions not working with background-position property
body: <p>I know I'm talking about IE but I <em>think</em> <code>transition</code> property was fixed in more recent (Edge?) versions.</p>
  
  <p>I'm trying to transition the <code>background-position</code> of an element (see demo below) but for whatever reason it's not working in IE...  :'-( </p>
  
  <p>In the demo below, the "Click Me" button should be highlighting the adjacent text but not so for IE.</p>
  
  <p>If you toggle the "Toggle Display" button, you'll see the background color shows up (after the transition of course) because toggling <code>display:none</code>  is forcing the repaint.  I know <code>background-size</code> may not be <code>transition</code>-able in IE but does that affect my single transition property on the <code>background-position</code>? Any way to have this background color transition from left to right (see demo in any other browser than IE for desired effect)?</p>
  
  <p>Thanks! </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/** JS only to facilitate the test and trigger the CSS on button click **/
  var myHighlighter = document.querySelector('.button');
  var myToggle = document.querySelector('.toggle');
  
  myHighlighter.addEventListener('click', press)
  // toggling `display:none` just forces a repaint
  myToggle.addEventListener('click', toggle);
  
  function press(e) {
    var newState = (e.target.getAttribute('aria-pressed')!=="true");
    e.target.setAttribute('aria-pressed', newState);
  }
  
  function toggle(e) {
    var isToggled = (e.target.previousElementSibling.getAttribute('style'))
    if (isToggled) {
      e.target.previousElementSibling.removeAttribute('style');
    } else {
      e.target.previousElementSibling.setAttribute('style', 'display:none;');
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* conditional CSS for transition based on presence of `aria-pressed="true"` attribute */
  .button + .text {
    background: linear-gradient(to right, orange 50%, transparent 50%) no-repeat;
    background-position:right bottom;
    background-size: 200% 100%;
    transition: none;
  }
  
  .button[aria-pressed="true"] + .text {
    background-position: left bottom;
    transition: background-position .5s linear;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;button type="button"
          class="button"
          aria-pressed="false"&gt; 
          Click Me
    &lt;/button&gt;
  
    &lt;span class="text"&gt;IE won't transition the background-position (color highlighting) initially without toggleing the display (repaint)&lt;/span&gt;
    &lt;button class="toggle"&gt;Toggle Display&lt;/button&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>