亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

父級的CSS過濾器會破壞子項定位

父級的CSS過濾器會破壞子項定位

江戶川亂折騰 2019-09-06 15:56:22
我目前正在一個網站上工作,遇到了這種奇怪的行為。我不確定這是一個錯誤或如何處理它所以我要求你們幫忙。所以我有這個標題屏幕“動畫”,其標題以全屏頁面為中心,當您向下滾動時,它變得更小并保持在頁面頂部。這是一個具有預期行為的工作示例,我從中剝離了所有不必要的代碼以使其最小化:$(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問題還有一個鏈接到討論決定的地方,這個代碼示例(存檔鏈接)用于說明包含塊設計用于修復的模糊性。

查看完整回答
反對 回復 2019-09-06
?
月關寶盒

TA貢獻1772條經驗 獲得超5個贊

首先它不是bug,它的設計就像我們不喜歡的許多功能,但我們應該使用(清除浮動,邊緣折疊等),所以你應該調整你的代碼以克服這個問題。沒有通用的解決方案,但根據您的情況,肯定有一個解決方案。您可以通過添加特定代碼來提出問題,以便了解我們是否可以修改您的邏輯以保持您的要求并解決問題。

查看完整回答
反對 回復 2019-09-06
  • 3 回答
  • 0 關注
  • 793 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號