我目前正在一個網站上工作,遇到了這種奇怪的行為。我不確定這是一個錯誤或如何處理它所以我要求你們幫忙。所以我有這個標題屏幕“動畫”,其標題以全屏頁面為中心,當您向下滾動時,它變得更小并保持在頁面頂部。這是一個具有預期行為的工作示例,我從中剝離了所有不必要的代碼以使其最小化:$(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;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body> <div class="wrapper"> <div id="inside"> <div id="header"> <h1 id="title">Title</h1> </div> </div> <div id="content"></div></body>接下來是完全相同的片段,但有一個補充:我應用了一個過濾器,就我而言,純粹是化妝品:filter: brightness(1.3);。正如您在下面看到的那樣,當您在“動畫”中間滾動時,標題就會消失。當你檢查元素時,它仍然具有它的所有屬性,但不知怎的,它已經消失了。這在Firefox和Chrome中是一樣的,我不知道為什么。如果有人可以發布應用了過濾器的工作片段并解釋為什么它之前不起作用,我會非常感激。
3 回答

慕妹3146593
TA貢獻1820條經驗 獲得超9個贊
您的答案的更多上下文:此GitHub問題添加了一個規范,即當filter具有除以外的值時創建包含塊none。GitHub問題還有一個鏈接到討論決定的地方,這個代碼示例(存檔鏈接)用于說明包含塊設計用于修復的模糊性。

月關寶盒
TA貢獻1772條經驗 獲得超5個贊
首先它不是bug,它的設計就像我們不喜歡的許多功能,但我們應該使用(清除浮動,邊緣折疊等),所以你應該調整你的代碼以克服這個問題。沒有通用的解決方案,但根據您的情況,肯定有一個解決方案。您可以通過添加特定代碼來提出問題,以便了解我們是否可以修改您的邏輯以保持您的要求并解決問題。
- 3 回答
- 0 關注
- 793 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消