CSS`transform'正在影响``背景''

Question

在父元素上使用CSS 转换会影响所有其他孩子及其背景属性。

在我提供的示例中，我正在伪造儿童元素内部的丙烯酸模糊效果。

当我试图模仿窗口产卵的动画时，就会发生问题，其中窗口不透明度设置为0，而动画则在该窗口中从scale（0.8）到比例（1），并为obacity做同样的事情。

在此特定示例中，我尚未提供窗口产卵动画，但是只需调用wm_window_scale（window_1，1.2）在JavaScript中，可以轻松评估问题。

显而易见的问题是，背景现在完全忽略了，并且背景的模糊版本（丙烯酸模糊图像）现在占据了父元素的宽度和高度，而不是视图（如它应该）。 显然，这偏离了应用程序的“沉浸”。我做也许知道如何使用JavaScript修复它，但是我想要一个无用JavaScript的解决方案，我想要普通的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>

Answer 1

我有同样的问题。我唯一能找到的解决方案是，当父页面滚动时，图像跳回到应该的位置。

elmPar.scrollTo({top: 1, behavior: 'instant'});
elmPar.scrollTo({top: 0, behavior: 'instant'});

或保持当前页面滚动位置

elmPar.scrollBy({top: 1, behavior: 'instant'});
elmPar.scrollBy({top: 0, behavior: 'instant'});

或如果循环运行，以避免以怪异的方式跳入位置

elmPar.scrollTo({top: elmPar.scrollTop+1, behavior: 'instant'});
elmPar.scrollTo({top: elmPar.scrollTop-1, behavior: 'instant'});