父级的CSS过滤器会破坏子项定位

我目前正在一个网站上工作,遇到了这种奇怪的行为.我不确定这是一个错误或如何处理它所以我要求你们帮忙.

所以我有这个标题屏幕“动画”,其标题以全屏页面为中心,当您向下滚动时,它变小并保持在页面顶部.这是一个具有预期行为的工作示例,我从中剥离了所有不必要的代码以使其最小化：

$(window).scroll( () => {
    "use strict";
    let windowH = $(window).height();
    let windowS = $(window).scrollTop();
    let header  = $("#header").height(); 
	
    if (windowS < windowH-header) {
        $("#title").css("transform","scale("+(2-(windowS/($(document).outerHeight()-windowH))*2.7)+")");
        $("#header").css("transform","translateY(0)");
        $("#inside,#content").css({
            "position": "static","margin-top": 0
        });
    } else {
        $("#inside").css({
            "position": "fixed","margin-top": -windowH+header
        });
        $("#content").css("margin-top",windowH);
    }
  
    $("#header").css("position",windowS > (windowH-header)/2 ? "fixed" :"static");
});

.fixed {
    position: fixed!important;
}
.wrapper {
    width: 100%;
    text-align: center;
}
.wrapper:before {
    display: table;
    content: " ";
}
.wrapper:after {
    clear: both;
}
#inside {
    width: 100%;
    height: 100vh;
    background-color: lightcoral;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header {
    height: 90px;
    top: 0;
    position: sticky;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
#title {
    width: 100%;
    color: #fff;
    transform: scale(2);
}
#content {
    height: 1000px;
    background-color: lightblue;
}