CSS `transform` is affecting `background-attachment`

Question

Using CSS transform on a parent element affects all other children and their background-attachment properties.

In the example I'm providing, I am faking the acrylic blur effect inside the children elements.

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 scale(0.8) to scale(1), and doing the same for opacity.

In this particular sample I have not provided the window spawning animation, but it's easy to evaluate the problem by simply calling wm_window_scale(window_1, 1.2) inside JavaScript.

The obvious issue is that the background-attachment 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 "immersion" of the application. I do maybe know how to fix it using JavaScript, but I want a solution that works without JavaScript, I want plain CSS.

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>15e3&&(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=_=>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("<b>wm_window_move</b>("+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("<b>wm_window_size</b>("+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("<b>wm_window_maximize</b>("+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")&&_.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("<b>wm_window_get_size</b>("+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("<b>wm_window_get_position</b>("+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("<b>wm_window_get_position_and_size</b>("+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("<b>wm_desktop_get_size</b>()");let _=[desktop.clientWidth,desktop.clientHeight];return 0==_[0]||0==_[1]?WM_DESKTOP_SIZE_ZERO:_}function wm_window_make_movable(_=null){dbglog("<b>wm_window_make_movable</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;dbglog("&gt; Not implemented.")}function wm_window_radius_disable(_=null){dbglog("<b>wm_window_radius_disable</b>("+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("<b>wm_window_radius_enable</b>("+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("<b>wm_window_center</b>("+wm_window_get_id(_)+")");let e=wm_window_check(_);if(e!=WM_WINDOW_CHECK_PASSED)return e;"1"==_.getAttribute("wm-maximized")&&_.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("<b>wm_window_snap_left</b>("+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("<b>wm_window_snap_right</b>("+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("<b>wm_window_snap_center</b>("+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("<b>wm_window_scale</b>("+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&&(_.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()}

*{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)}

<!doctype html>
<html>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<title>CSS `transform` is affecting `background-attachment`</title>
<link rel=stylesheet href=style.css>
</head>
<body>
<div id=_dbglog>
<div class=fake-acrylic></div>
<div class=title>Debug Log <button onclick=this.parentElement.parentElement.remove()>Close</button></div>
<div class=messages>
</div>
</div>
<div id=desktop class=bg>
<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>
<div class=fake-acrylic></div>
<div class="titlebar no-selections cursor-default" ondblclick=wm_window_maximize(window_1)>
<div class="icon icon-notepad"></div>
<div class=title>*Untitled - Notepad</div>
<div class=actions>
<div class="action snap-left" onclick=wm_window_snap_left(window_1) title="Snap Left">&nbsp;</div>
<div class="action snap-center" onclick=wm_window_snap_center(window_1) title="Snap Center">&nbsp;</div>
<div class="action snap-right" onclick=wm_window_snap_right(window_1) title="Snap Right">&nbsp;</div>
<div class="action center" onclick=wm_window_center(window_1) title=Center>&nbsp;</div>
<div class="action minimize" onclick='dbglog("Action <b>Minimize</b> not implemented")' title=Minimize>&nbsp;</div>
<div class="action maximize" onclick=wm_window_maximize(window_1) title=Maximize>&nbsp;</div>
<div class="action close" onclick='dbglog("Action <b>Close</b> not implemented")' title=Close>&nbsp;</div>
</div>
</div>
<div class="menu no-selections cursor-default">
<div class=option onclick='dbglog("Menu option <b>File</b> not implemented")'>File</div>
<div class=option onclick='dbglog("Menu option <b>Edit</b> not implemented")'>Edit</div>
<div class=option onclick='dbglog("Menu option <b>Format</b> not implemented")'>Format</div>
<div class=option onclick='dbglog("Menu option <b>View</b> not implemented")'>View</div>
<div class=option onclick='dbglog("Menu option <b>Help</b> not implemented")'>Help</div>
</div>
<textarea class=textarea spellcheck=false></textarea>
<div class="status-bar no-selections cursor-default">
<div class=info style=width:80px>UTF-8</div>
<div class=vr></div>
<div class=info style=width:140px>Windows (CRLF)</div>
<div class=vr></div>
<div class=info style=width:50px>100%</div>
<div class=vr></div>
<div class=info style=width:120px>Ln 1, Col 1</div>
<div class=vr></div>
</div>
</div>
</div>
<div class="taskbar no-selections">
<div class="fake-acrylic opacity-9"></div>
<div class=chunk>
<div class="item icon-windows-logo"></div>
<div class="item icon-file-explorer"></div>
</div>
</div>
<script src=main.js></script>
<script>setTimeout(function(){wm_window_center(window_1)},100)</script>
</body>
</html>