title: CSS `transform` is affecting `background-attachment`
body: <p>Using CSS <code>transform</code> on a parent element affects all other children and their <code>background-attachment</code> properties.</p>
  <p>In the example I'm providing, I am faking the acrylic blur effect inside the children elements.</p>
  <p>The issue occurs when I'm trying to imitate the animation of a window spawning, where the window opacity is set to 0, and the animation kicks in that scales that window from <code>scale(0.8)</code> to <code>scale(1)</code>, and doing the same for <code>opacity</code>.</p>
  <p>In this particular sample I have not provided the window spawning animation, but it's easy to evaluate the problem by simply calling <code>wm_window_scale(window_1, 1.2)</code> inside JavaScript.</p>
  <p>The obvious issue is that the <code>background-attachment</code> is now completely ignored, and the blurred version of the background (acrylic blur image) is now occupying the width and height of the parent element, and not the viewport (as it should).
  And obviously this deviates from the &quot;immersion&quot; of the application. I do <em>maybe</em> know how to fix it using JavaScript, but I want a solution that works without JavaScript, I want plain CSS.</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>var _dbglog=document.querySelector("#_dbglog .messages");function dbglog(_,e=5e3){var w=document.createElement("div");w.setAttribute("class","message"),w.innerHTML=_,_dbglog.appendChild(w),setTimeout(function(){w.style.width="100%",w.style.height="32px"},0),e&gt;15e3&amp;&amp;(e=15e3),setTimeout(function(){w.remove()},e)}const WM_WINDOW_NULL=4,WM_WINDOW_NOT_ELEMENT=8,WM_WINDOW_NOT_A_WINDOW=22,WM_WINDOW_POSX_NULL=20,WM_WINDOW_POSY_NULL=24,WM_WINDOW_SIZW_NULL=36,WM_WINDOW_SIZH_NULL=40,WM_WINDOW_MOVE_SUCCESS=50,WM_WINDOW_SIZE_SUCCESS=72,WM_WINDOW_MAXIMIZE_SUCCESS=100,WM_WINDOW_CHECK_PASSED=128,WM_WINDOW_RADIUS_PASSED=150,WM_WINDOW_CENTER_PASSED=274,WM_WINDOW_SNAP_LEFT_PASSED=296,WM_WINDOW_SNAP_RIGHT_PASSED=324,WM_WINDOW_SNAP_CENTER_PASSED=352,WM_WINDOW_SCALE_PASSED=374,WM_WINDOW_SCALE_DEFAULTED=402,WM_DESKTOP_SIZE_ZERO=256,abs=_=&gt;Math.abs(_),i2p=function(_){return _+"px"},s2i=function(_){return Number(_.replace(/[aA-zZ]/g,""))};function wm_window_check(_=null){return null==_?WM_WINDOW_NULL:_ instanceof HTMLElement?0==_.getElementsByClassName("titlebar").length?WM_WINDOW_NOT_A_WINDOW:WM_WINDOW_CHECK_PASSED:WM_WINDOW_NOT_ELEMENT}function wm_window_move(_=null,e=null,t=null){dbglog("&lt;b&gt;wm_window_move&lt;/b&gt;("+wm_window_get_id(_)+", "+w+", "+h+")");let i=wm_window_check(_);return i!=WM_WINDOW_CHECK_PASSED?i:null==e?WM_WINDOW_POSX_NULL:null==t?WM_WINDOW_POSY_NULL:(_.style.left=i2p(e),_.style.top=i2p(t),WM_WINDOW_MOVE_SUCCESS)}function wm_window_size(_=null,e=null,w=null){dbglog("&lt;b&gt;wm_window_size&lt;/b&gt;("+wm_window_get_id(_)+", "+e+", "+w+")");let t=wm_window_check(_);return t!=WM_WINDOW_CHECK_PASSED?t:null==e?WM_WINDOW_SIZW_NULL:null==w?WM_WINDOW_SIZH_NULL:(e=abs(e),w=abs(w),_.style.width=i2p(e),_.style.height=i2p(w),WM_WINDOW_SIZE_SUCCESS)}function wm_window_maximize(_=null){dbglog("&lt;b&gt;wm_window_maximize&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=wm_desktop_get_size();if(w==WM_DESKTOP_SIZE_ZERO)return w;var t=Number(_.getAttribute("wm-maximized"));if(_.setAttribute("wm-maximized",Number(!t)),"1"==_.getAttribute("wm-centered")&amp;&amp;_.setAttribute("wm-centered","0"),t){let e=_.getAttribute("wm-last-pos").split(","),w=_.getAttribute("wm-last-siz").split(",");wm_window_move(_,e[0],e[1]),wm_window_size(_,w[0],w[1]),wm_window_radius_enable(_)}else wm_window_move(_,0,0),wm_window_size(_,w[0],w[1]-40),wm_window_radius_disable(_);return WM_WINDOW_MAXIMIZE_SUCCESS}function wm_window_get_size(_=null){dbglog("&lt;b&gt;wm_window_get_size&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);return e!=WM_WINDOW_CHECK_PASSED?e:[s2i(_.style.width),s2i(_.style.height)]}function wm_window_get_position(_=null){dbglog("&lt;b&gt;wm_window_get_position&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);return e!=WM_WINDOW_CHECK_PASSED?e:[s2i(_.style.left),s2i(_.style.top)]}function wm_window_get_position_and_size(_=null){dbglog("&lt;b&gt;wm_window_get_position_and_size&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=wm_window_get_position(_),t=wm_window_get_size(_);return[w[0],w[1],t[0],t[1]]}function wm_desktop_get_size(){dbglog("&lt;b&gt;wm_desktop_get_size&lt;/b&gt;()");let _=[desktop.clientWidth,desktop.clientHeight];return 0==_[0]||0==_[1]?WM_DESKTOP_SIZE_ZERO:_}function wm_window_make_movable(_=null){dbglog("&lt;b&gt;wm_window_make_movable&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;dbglog("&amp;gt; Not implemented.")}function wm_window_radius_disable(_=null){dbglog("&lt;b&gt;wm_window_radius_disable&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=_.getAttribute("class");return _.setAttribute("class",w+" no-radius"),WM_WINDOW_RADIUS_PASSED}function wm_window_radius_enable(_=null){dbglog("&lt;b&gt;wm_window_radius_enable&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;let w=_.getAttribute("class");return w=w.replace("no-radius",""),_.setAttribute("class",w),WM_WINDOW_RADIUS_PASSED}function wm_window_center(_=null){dbglog("&lt;b&gt;wm_window_center&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;"1"==_.getAttribute("wm-maximized")&amp;&amp;_.setAttribute("wm-maximized","0");let t=_.getAttribute("wm-last-siz").split(",");w=t[0],h=t[1],wm_window_size(_,w,h);var i=wm_desktop_get_size();wm_window_size(w,h);var n=[i[0]/2-w/2,i[1]/2-20-h/2];wm_window_move(_,n[0],n[1]);var o=Number(_.getAttribute("wm-centered"));return _.setAttribute("wm-centered",Number(!o)),_.setAttribute("wm-last-pos",[n[0],n[1]].join(",")),WM_WINDOW_CENTER_PASSED}function wm_window_snap_left(_=null){dbglog("&lt;b&gt;wm_window_snap_left&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;var w=wm_desktop_get_size();wm_window_get_size(_);return wm_window_move(_,0,0),wm_window_size(_,w[0]/2,w[1]-40),WM_WINDOW_SNAP_LEFT_PASSED}function wm_window_snap_right(_=null){dbglog("&lt;b&gt;wm_window_snap_right&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;var w=wm_desktop_get_size();wm_window_get_size(_);return wm_window_move(_,w[0]/2,0),wm_window_size(_,w[0]/2,w[1]-40),WM_WINDOW_SNAP_RIGHT_PASSED}function wm_window_snap_center(_=null){dbglog("&lt;b&gt;wm_window_snap_center&lt;/b&gt;("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;var w=wm_desktop_get_size(),t=(wm_window_get_size(_),w[0]/3);return wm_window_move(_,w[0]/2-t/2,0),wm_window_size(_,t,w[1]-40),WM_WINDOW_SNAP_CENTER_PASSED}function wm_window_scale(_=null,e=null){dbglog("&lt;b&gt;wm_window_scale&lt;/b&gt;("+wm_window_get_id(_)+", "+e+")");let w=wm_window_check(_);return w!=WM_WINDOW_CHECK_PASSED?w:null==e?(_.style.transform="",WM_WINDOW_SCALE_DEFAULTED):(null!=e&amp;&amp;(_.style.transform="scale("+e+")"),WM_WINDOW_SCALE_PASSED)}function wm_window_get_id(_=null){let e=wm_window_check(_);return e!=WM_WINDOW_CHECK_PASSED?e:_.getAttribute("id").toString()}</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{outline:0}body,html{margin:0;padding:0}body{font-family:sans-serif;font-size:17.5px}div,p,span,textarea{font-size:17.5px}#_dbglog{background:rgb(255,255,255,.95);border-radius:4px;box-sizing:border-box;padding:5px 10px;box-shadow:0 0 15px rgba(0,0,0,.4);width:400px;height:auto;position:fixed;left:calc(100vw - 415px);top:15px;display:block;z-index:9999999999}#_dbglog .title{color:#800;font-weight:700}#_dbglog .message{width:0%;height:0;overflow:hidden;box-sizing:border-box;padding:5px 0;font-family:monospace;border-top:1px solid #888;transition:all .2s ease}#_dbglog .message:first-child{margin-top:5px}.bg{background-image:url("https://i.imgur.com/MTwwGiZ.jpg")}.fake-acrylic{background-image:url("https://i.imgur.com/9pEqYVr.jpg");background-attachment:fixed;background-position:center;background-size:cover;background-repeat:no-repeat;position:absolute;top:-1px;right:-1px;width:calc(100% + 2px);height:calc(100% + 2px);opacity:.6;display:block!important;border-radius:inherit;z-index:0;pointer-events:none}#desktop{background-size:cover;background-repeat:no-repeat;background-position:center;background-attachment:fixed;width:100vw;height:100vh;position:fixed;top:0;right:0;bottom:0;left:0}.app-window{background:#fff;border-radius:8px;box-shadow:0 0 64px 15px rgba(0,0,0,.5);top:0;left:0;transition:left .5s ease,top .5s ease,width .5s ease,height .5s ease,transform .5s ease;position:fixed}.app-window .titlebar{position:relative;height:32px;box-sizing:border-box;top:0;left:0;right:0;width:100%;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;cursor:default}.app-window .titlebar .icon{width:32px;height:100%;background-size:24px;background-position:center;background-repeat:no-repeat;float:left}.app-window .titlebar .title{height:100%;float:left;box-sizing:border-box;padding:6px 5px}.app-window .titlebar .actions{position:absolute;height:100%;top:0;right:0;border-top-right-radius:inherit}.app-window .titlebar .actions .action{background-size:auto 10px;background-position:center;background-repeat:no-repeat;width:40px;height:100%;display:block;transition:background-color .2s ease;float:left}.app-window .titlebar .actions .action:last-child{border-top-right-radius:inherit}.app-window .titlebar .actions .action:hover{background-color:rgba(127,127,127,.33)}.app-window .titlebar .actions .action:active{background-color:rgba(127,127,127,.66)}.app-window .titlebar .actions .action.close:hover{background-color:red}.app-window .titlebar .actions .action.close:active{background-color:rgba(255,0,0,.5)}.app-window .titlebar .actions .action.close{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX/AAAAAABBoxIDAAAAAXRSTlMAQObYZgAAACVJREFUeF4ViUERAAAIgwjgywY2Mdqii3d7ACPLhoGGcgKq0esANL8Df18TT9sAAAAASUVORK5CYII")}.app-window .titlebar .actions .action.maximize{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX/AAAAAABBoxIDAAAAAXRSTlMAQObYZgAAABtJREFUeF5twgENAAAAAUHRRBPtm1HAdiqKvzKPvwl/StkAwQAAAABJRU5ErkJggg")}.app-window .titlebar .actions .action.minimize{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX/AAATExO6kg9mAAAAAXRSTlMAQObYZgAAABhJREFUeF5VwDEBAAAAgjD6p7KZvjis4Q0dDQHAIzU/6gAAAABJRU5ErkJggg")}.app-window .titlebar .actions .action.center{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAClJREFUeF4ViFERAAAExZZBAFlU0USV10QVTXC3j20oyGIaB3tepn8qFmvrBycKPOmNAAAAAElFTkSuQmCC")}.app-window .titlebar .actions .action.snap-left{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAACNJREFUeF4dyLENAAAIw7CcT1l4ibM6IipFGYyhkqBh9q+IOWp8Bv7neXW3AAAAAElFTkSuQmCC")}.app-window .titlebar .actions .action.snap-right{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAACdJREFUeF4dibkNAAAIhChMXMARHORGdzALn4RQAF6YjhQh+p1fvAZIdwUHHLZZKQAAAABJRU5ErkJggg")}.app-window .titlebar .actions .action.snap-center{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKAQMAAAC64i25AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAACdJREFUeF4NxqERACAMBLDYV10ByxZY9l8EW0dNLooQ7rKPfuNcKB8z2wPH1HpqzgAAAABJRU5ErkJggg")}.app-window .menu{top:32px;left:0;right:0;width:100%;height:28px;box-sizing:border-box}.app-window .menu .option{width:auto;height:inherit;box-sizing:border-box;border:1px solid transparent;display:inline-block;padding:3px;transform:scale(.96);border-radius:6px;cursor:default;transition:background-color .2s ease}.app-window .menu .option:hover{background-color:rgba(0,0,0,.2)}.app-window .menu .option:active{background-color:rgba(0,0,0,.4);border-color:rgba(0,0,0,.6)}.app-window.app-notepad{top:-500px;left:calc(50vw - 300px)}.app-window.app-notepad .textarea{width:100%;height:calc(100% - 92px);box-sizing:border-box;border:0;resize:none;border-top:1px solid #888;border-bottom:1px solid #888;float:left;filter:contrast(90deg)}.no-selections ::selection,.no-selections::selection{background:0 0}.cursor-default,.cursor-default *{cursor:default}.app-window.app-notepad .status-bar{width:100%;height:32px;float:left}.app-window.app-notepad .status-bar .info{display:block;float:right;text-align:left;box-sizing:border-box;padding-top:5.5px}.app-window.app-notepad .status-bar .vr{background-color:#888;width:1px;height:80%;margin:3.5px 5px;float:right}.icon-notepad{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACZFBMVEUAAAAFcJNy0e1x0e2A0OjFzdDOzs/Huq+pXRymUQqmUgsFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJMFcJNy0e1y0e1y0e172fQjiqwTfZ900u531fEWgKEehqh72fRpyeYPeJsGcJMulLV92/ZTtdMKdJcHcpVDp8Zy0e1y0e1y0e1y0e100+9GqskulLVy0e1z0u40mrpApMRwz+sjiqtStNJ10+9oyOUUfqANd5pgwd5y0e1y0e1y0e1y0e1x0e1x0e1x0e2A0OiA0OiA0OjFzdDFzdDFzdDOzs/Ozs/Ozs/Huq/Huq/Huq+pXRypXRypXRymUQqmUQqmUQqmUgumUgumUgumUgumUgumUgumUgumUgumUgsFcJMEb5ICbZACbZEDbpEGcZQCbpFy0e100+5Lr80PeZsNd5o2m7tz0u47oL8NeJoOeJpGqslwz+srkrIRe51WuNZ00+9pyeYeh6gYgaJjw+Bry+hhwt9oyORpyeVqyudmxuNtzelx0OxkxOFiw+Bvz+tWt9VTtdNStdNcvdoQep0GcZUHcpUFcJQmja4OeZsDb5IEcJMCbpIjjK1sy+hMrs1Iq8pHqslUttRryudCpsVBpcRQstAji6wSfJ4Ic5YJdJYnj69uzepavNpYuthfwd5x0e100u41m7svlrYulbVCp8YMd5kBbZAAbI8iiqtjxOEag6URfJ4Qe50tlLVlxeJpyOWA0OjFzdDOzs/Huq+pXRymUQr///9lZ5ORAAAAbnRSTlMAAAAAAAAAAAAAACxxc0U/cjICUW8gCmBnEWOcjgW2+kkW2OknASw+OomzPDupkzlByPt0OU7h7lsbBa/59fn79fX7+fX8+PX2/f73+G22cQW2cQW2cQW2cQW2cQW2cQW2cQW2cQWa3NjaYBAWCgGS1IEAAAABYktHRMuEswZwAAAACXBIWXMAAA7CAAAOwgEVKEqAAAAAB3RJTUUH5gQTDBUWcZ6mrwAAAb1JREFUSMdjYBgFpAJGbh5ePkZGfl4BQUYhYV4RUUYxcV4JSUbcGqTy8qQZGWXy8ngYZeXy5BUYFZXylFWwa2BSVVPX0MzL09LW0c3L09M3MMwzMjYxNcszt9BRt2TCosHK2sbWLr/A3sHRqbDI2dbFtaDYzd3Ds8TL29HHF6sGv9Ky8orKqtLqmtq6+rKGxsqm5pbWttr2jupSfxwaSju7urpLS3u6unpLS/u6uvpLJ0zsmjS5FLeG0urqaiiBQuLWgAPg0VCGDqrxa+ifMhUVTJs+AZ+G6q4ZM2ehgNlzGvBrmDtvPgpYsBCvhtJFi5eggqXLJuD3dAs6IOBpkjUsr1+BClauIhBKdUX5KKBwNf5QmrRm7ToUMGs9/lDasHETGti8Bb+nt6IDQqFEYuKr7t62HRXs2EkglHbtLkEBe/biD6V9+w+sQQEHD+EPpYa+w2jgCAFPV2MA6oYSTTUwBwRuwQmCmDE1sASHHMUJQlkwNbCGhR/DCSJYMTWwRUYdxwmi2TA1sMfEnsAJ4tgxNXDEJ5zECRI5MDVwJiWfwglSODE1cKWmpWfgAJlZXFg0cGXn4AS5WDQMXQAAXnkwv5geFe0AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDQtMTlUMTI6MTY6MDcrMDA6MDBlHaI5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA0LTE5VDEyOjIxOjA1KzAwOjAw+OF21AAAAABJRU5ErkJggg")}.icon-windows-logo{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACABAMAAAAxEHz4AAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAAB3RSTlMASfr1R0gV7qelNgAAAGZJREFUeF7t06ENgEAURMElIWgQNAACTwW0QAfUgKF9OvgGcyHz9GbMv8tTdY9Jt5WTxgEAAAAAAAAAAAAAAACWqvVI+r2cZKqar2Q4y0kaSJ/P+Pkh/fw3AgAAAAAAAAAAAAAA8AKEO9ZbE0rsfwAAAABJRU5ErkJggg")}.icon-file-explorer{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAA3lBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABLS0sBAQFXV1dVVVVMTEwLCwsZGRk9PT0CAgIpKSkaGhoqKiolJSUFBQU+Pj5ERERiYmJwcHAgICAcHBxAQEBCQkJSUlIMDAwrKysICAhWVlYAAABsbGwfHx9UVFRhYWFtbW1fX19qamoYGBgDAwMJCQkEBARubm4eHh47OztTU1MVFRVJSUkKCgobGxsNDQ1vb28RERGlr4yDAAAAGHRSTlMA+kl/BbZ9gEr+gvu/2wE0s0j1RxVGJCWZwQP9AAABp0lEQVR4XuzOtxHEMAwEQIGBEkYyXwmNvLfff0OqAZibYYKtYLPklFJKGb6iRgaIr6yQATffgWWdyEADT9d6jj6gA827cPj0AZv/DIwk4CzhiAL/AeQYnSiwxR0inpco8LE7bykMwlAYhF1GYhJ8jb3SY4stGHwSu/8VCe7gwP84s4DhmwZLkiycAAAA6vj39L2IAcXq7Ol3FQNiefpaohjwar62cpMC2j0HZ4+kBGy5N2dJCwiCoR4AAAAAAAAAAAAAAAAAAAAAAAAAAMDBrh3rMAgCYRzvYxQ0oAI6QjC6sDSavv8rtZ295EJyxA7ff/6G33jDZfEqAYsVbqkDHJMaRFPTUQcoq3BFBgAAAAAAAAAAAKiBTTUFbLNlml9NAUlnJp3aAnLHlN3fAgAAAAAAAAAAAACqntl2I32SmZ3Y9j9A8O7aGGnAmRxTOmlAHImxD1/AzX3anXscAEEoCMKrwBMIf5UexPvfzQts8mJHsV8/ySBQtfOgWXBY42WvPAAX00sFuC5epghq2wENrHIQxeAyXq5/A2Pmk8g3XA8v58CeRETkA6gr76xYeIMJAAAAAElFTkSuQmCC")}.taskbar{background:#fff;position:fixed;bottom:0;left:0;right:0;height:40px;border-top:1px solid rgba(0,0,0,.1);text-align:center;box-sizing:border-box}.taskbar .item{background-color:rgba(255,255,255,.3);background-size:24px;background-repeat:no-repeat;background-position:center;height:100%;width:40px;border:none;display:inline-block;transition:background-color .2s ease,filter .1s ease}.taskbar .item:hover{background-color:rgba(0,0,0,.6)}.taskbar .item:active{background-color:rgba(255,255,255,.9);filter:invert(80%)}.taskbar #taskbar_time{display:inline-block}.taskbar .chunk{height:100%;width:33.32%;box-sizing:border-box;display:inline-block}.opacity-0{opacity:0}button{background-color:rgba(0,0,0,.1);border:2px solid rgba(0,0,0,.2);font-size:17.5px;border-radius:4px;transition:background-color .2s ease,border .2s ease}button:hover{background-color:rgba(0,0,0,.2);border-color:rgba(0,0,0,.3)}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset=UTF-8&gt;
  &lt;meta name=viewport content="width=device-width,initial-scale=1"&gt;
  &lt;title&gt;CSS `transform` is affecting `background-attachment`&lt;/title&gt;
  &lt;link rel=stylesheet href=style.css&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=_dbglog&gt;
  &lt;div class=fake-acrylic&gt;&lt;/div&gt;
  &lt;div class=title&gt;Debug Log &lt;button onclick=this.parentElement.parentElement.remove()&gt;Close&lt;/button&gt;&lt;/div&gt;
  &lt;div class=messages&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id=desktop class=bg&gt;
  &lt;div class="app-window app-notepad" id=window_1 style=width:600px;height:400px wm-centered=0 wm-maximized=0 wm-last-pos=150,150 wm-last-siz=600,400&gt;
  &lt;div class=fake-acrylic&gt;&lt;/div&gt;
  &lt;div class="titlebar no-selections cursor-default" ondblclick=wm_window_maximize(window_1)&gt;
  &lt;div class="icon icon-notepad"&gt;&lt;/div&gt;
  &lt;div class=title&gt;*Untitled - Notepad&lt;/div&gt;
  &lt;div class=actions&gt;
  &lt;div class="action snap-left" onclick=wm_window_snap_left(window_1) title="Snap Left"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action snap-center" onclick=wm_window_snap_center(window_1) title="Snap Center"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action snap-right" onclick=wm_window_snap_right(window_1) title="Snap Right"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action center" onclick=wm_window_center(window_1) title=Center&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action minimize" onclick='dbglog("Action &lt;b&gt;Minimize&lt;/b&gt; not implemented")' title=Minimize&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action maximize" onclick=wm_window_maximize(window_1) title=Maximize&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="action close" onclick='dbglog("Action &lt;b&gt;Close&lt;/b&gt; not implemented")' title=Close&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="menu no-selections cursor-default"&gt;
  &lt;div class=option onclick='dbglog("Menu option &lt;b&gt;File&lt;/b&gt; not implemented")'&gt;File&lt;/div&gt;
  &lt;div class=option onclick='dbglog("Menu option &lt;b&gt;Edit&lt;/b&gt; not implemented")'&gt;Edit&lt;/div&gt;
  &lt;div class=option onclick='dbglog("Menu option &lt;b&gt;Format&lt;/b&gt; not implemented")'&gt;Format&lt;/div&gt;
  &lt;div class=option onclick='dbglog("Menu option &lt;b&gt;View&lt;/b&gt; not implemented")'&gt;View&lt;/div&gt;
  &lt;div class=option onclick='dbglog("Menu option &lt;b&gt;Help&lt;/b&gt; not implemented")'&gt;Help&lt;/div&gt;
  &lt;/div&gt;
  &lt;textarea class=textarea spellcheck=false&gt;&lt;/textarea&gt;
  &lt;div class="status-bar no-selections cursor-default"&gt;
  &lt;div class=info style=width:80px&gt;UTF-8&lt;/div&gt;
  &lt;div class=vr&gt;&lt;/div&gt;
  &lt;div class=info style=width:140px&gt;Windows (CRLF)&lt;/div&gt;
  &lt;div class=vr&gt;&lt;/div&gt;
  &lt;div class=info style=width:50px&gt;100%&lt;/div&gt;
  &lt;div class=vr&gt;&lt;/div&gt;
  &lt;div class=info style=width:120px&gt;Ln 1, Col 1&lt;/div&gt;
  &lt;div class=vr&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="taskbar no-selections"&gt;
  &lt;div class="fake-acrylic opacity-9"&gt;&lt;/div&gt;
  &lt;div class=chunk&gt;
  &lt;div class="item icon-windows-logo"&gt;&lt;/div&gt;
  &lt;div class="item icon-file-explorer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src=main.js&gt;&lt;/script&gt;
  &lt;script&gt;setTimeout(function(){wm_window_center(window_1)},100)&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>