JustSong
V2EX  ›  React

[前端求助] 同样的代码页面表现不一致

  •  
  •   JustSong ·
    songquanpeng · Mar 15, 2021 · 5043 views
    This topic created in 2065 days ago, the information mentioned may be changed or developed.

    问题描述

    我正在重构博客系统的服务端( Express.js + Sequelize )部分,突然发现后台管理页面( React + AntD )的滚动出了问题,侧边导航栏不再固定,滚动时会留白:

    6BDavV.png

    本来我以为是我不小心改了什么东西,结果发现并没有什么值得注意的地方(后台管理页面在项目的 admin 文件夹内): https://github.com/songquanpeng/blog/compare/d58e079...master

    线上版本为:commit d58e079,是没问题的。

    离谱的是,使用 Gitpod 测试该版本( d58e079 ),发现也出现了该问题。

    复现步骤

    git clone https://github.com/songquanpeng/blog
    git checkout d58e079
    npm i
    npm run build # linux
    npm run build2 # windows
    npm start
    

    打开 http://localhost:3000/admin,账户 admin,密码 123456,切换到 Setting tab,选择 Third Party 子 tab,即可发现问题,或者直接把浏览器拉扁,也可发现侧边栏不再固定。

    Supplement 1  ·  Mar 15, 2021
    这是最新版本的预览地址:
    https://express-react-blog.herokuapp.com/admin/
    27 replies  •  2021-04-30 23:04:34 +08:00
    Justin13
    Justin13
    Mar 15, 2021 via Android
    1
    样式坏了就找找原因修一修啊。。
    JustSong
    JustSong
    OP
    Mar 15, 2021
    2
    @Justin13 但是关键点是代码是一样的,这就好离谱啊
    Justin13
    Justin13
    Mar 15, 2021 via Android❤️1
    4
    @JustSong 得先找到问题点,再说代码一样不一样。很多时候自己以为的和实际的完全两回事。
    JustSong
    JustSong
    OP
    Mar 15, 2021
    5
    @KouShuiYu 本地的 dev 和 build 都不行,只有线上的 build 是没问题的
    dingdangnao
    dingdangnao
    Mar 15, 2021
    6
    浏览器缓存?
    seki
    seki
    Mar 15, 2021
    7
    看看 css 加载的顺序
    wuweijia
    wuweijia
    Mar 15, 2021
    8
    在本地打包 生成线上代码 run 起来试试
    JerryCha
    JerryCha
    Mar 15, 2021
    9
    开 f12 对样式进行排查。打包前后的样式可能是两码事。
    JustSong
    JustSong
    OP
    Mar 15, 2021
    10
    @dingdangnao 不是这个原因,开了隐私模式也没救
    @seki 这是是一致的(毕竟用的版本是一样的)
    @wuweijia 本地试过了,Gitpod 上也试过了
    JustSong
    JustSong
    OP
    Mar 15, 2021
    11
    @JerryCha 现在问题是本地打包前后都是有问题的,2333,而线上的版本没问题
    Augi
    Augi
    Mar 15, 2021 via iPhone❤️1
    12
    一定是线上和本地最终引用的 css 文件有区别,可能是全局互相覆盖的问题,看下找下少了什么样式呗
    liyang5945
    liyang5945
    Mar 15, 2021❤️1
    13
    滚动的问题,content-area 元素太高了, ant-layout 设置 overflow: auto 即可
    trolifeyu
    trolifeyu
    Mar 15, 2021❤️1
    14
    不是侧边栏没固定,而是 table 部分超出父元素了
    SakuraKuma
    SakuraKuma
    Mar 15, 2021❤️1
    15
    你侧边栏不是 relative 的吗 固定啥??
    JustSong
    JustSong
    OP
    Mar 15, 2021
    16
    @liyang5945
    @trolifeyu 我最大的疑惑在于为啥之前和线上的没这个问题,明明我也没改样式相关的代码呀
    @SakuraKuma 我是想描述侧边栏随页面滚动的这个行为哈
    SakuraKuma
    SakuraKuma
    Mar 15, 2021
    17
    @JustSong ? relative 不就是会随页面滚动吗, 又没有 fixed
    JustSong
    JustSong
    OP
    Mar 15, 2021
    18
    @SakuraKuma 这里用的 Antd 的默认样式,正常来说侧边导航栏是不会随页面滚动的,我并没有改这里的样式
    jymsy
    jymsy
    Mar 15, 2021❤️1
    19
    sider 上有个 height 100%, 去掉吧?
    vivipure
    vivipure
    Mar 15, 2021❤️1
    20
    找到.ant-layout-content 加个 overflow: auto
    silk
    silk
    Mar 15, 2021❤️1
    21
    ant-layout ant-layout-has-sider 去掉高度
    SakuraKuma
    SakuraKuma
    Mar 15, 2021❤️1
    22
    @JustSong 因为你的"正常来说"不正常:doge , 没人设计导航栏会默认固定, 你可以套个 affix 试试.
    DoodleSit
    DoodleSit
    Mar 15, 2021❤️1
    23
    ant-layout-has-sider

    overflow:hidden

    ======

    ant-layout-content

    overflow:auto
    ccnotfound
    ccnotfound
    Mar 15, 2021❤️1
    24
    右边 content 高度超过了屏幕高度 设置右边内容滚动就可以了
    .ant-layout-content{
    overflow-y: auto;
    }
    angusun
    angusun
    Mar 15, 2021❤️1
    25
    如果不同环境下表现不一致,要不就是动了代码,要不就是动了依赖。
    faceRollingKB
    faceRollingKB
    Mar 16, 2021❤️1
    26
    可能是本地安装依赖的时候更新了依赖版本,跟上次构建时依赖不同导致的

    如果可以找到线上版本构建的依赖版本,本地固定 version 测一下应该就能复现
    shilianmlxg
    shilianmlxg
    Apr 30, 2021 via iPhone
    27
    我也遇到过 element 打包 build 和 dev 环境不一样。依赖问题。还有打包到 main.css 样式覆盖了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2186 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 105ms · UTC 14:30 · PVG 22:30 · LAX 06:30 · JFK 09:30
    ♥ Do have faith in what you're doing.