Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Watermark] 在Watermark->Layout->Content内的组件,sticky无法生效 #2680

Closed
ArSrNa opened this issue Dec 25, 2023 · 12 comments · Fixed by #2685
Closed

[Watermark] 在Watermark->Layout->Content内的组件,sticky无法生效 #2680

ArSrNa opened this issue Dec 25, 2023 · 12 comments · Fixed by #2685
Assignees
Labels
to be published fixed, not be published

Comments

@ArSrNa
Copy link

ArSrNa commented Dec 25, 2023

tdesign-react 版本

1.2.4

重现链接

No response

重现步骤

使用的结构类似:

 <div style={{ height: '300vh', position: 'relative' }}>
                <Image
                    fit="cover"
                    src="/app/render/images/cr/line.jpg"
                    style={{ zIndex: 1, position: 'sticky', top: 0 }}
                />
                <Image
                    fit="cover"
                    src="/app/render/images/cr/flat.jpg"
                    style={{ zIndex: 2, position: 'sticky', top: 0 }}
                />

                <Image
                    fit="cover"
                    src="/app/render/images/cr/eevee.jpg"
                    style={{ zIndex: 3, position: 'sticky', top: 0 }}
                />
            </div>

整个div放在了 这里面
展现的效果类似三张图片竖着摆放
image
这导致sticky无法生效

如果把它拉出Watermark包裹之外,使用就正常
image

浏览器控制台元素选项卡里面,确实看到渲染是sticky的,但是却没有生效,能够触发sticky的方式都没问题

期望结果

image
如图能正确sticky吸顶,而不是竖着叠放

实际结果

image
如图,所有元素都成了relative的方式叠放

框架版本

React 18.2.0 Next 14.0.4

浏览器版本

Edge 120.0.2210.91

系统版本

No response

Node版本

18.0

补充说明

No response

Copy link
Contributor

👋 @ArSrNa,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

Copy link
Contributor

github-actions bot commented Dec 25, 2023

♥️ 有劳 @carolin913 尽快确认问题。
确认有效后将下一步计划和可能需要的时间回复给 @ArSrNa

@ArSrNa
Copy link
Author

ArSrNa commented Dec 25, 2023

经过排查,是Watermark的问题

@ArSrNa ArSrNa changed the title [Layout] 在Layout->Content内的组件,sticky无法生效 [Watermark] 在Watermark->Layout->Content内的组件,sticky无法生效 Dec 25, 2023
@HaixingOoO
Copy link
Collaborator

经过排查,是Watermark的问题

是组件的问题吗?是的话可以提供个codeSandBox

@ArSrNa
Copy link
Author

ArSrNa commented Dec 25, 2023

经过排查,是Watermark的问题

是组件的问题吗?是的话可以提供个codeSandBox

https://codesandbox.io/p/sandbox/watermarkdui-stickyde-wen-ti-2jr5dr?file=%2Fsrc%2FApp.js

@HaixingOoO
Copy link
Collaborator

https://codesandbox.io/p/sandbox/watermarkdui-stickyde-wen-ti-2jr5dr?file=%2Fsrc%2FApp.js

image

在Watermark里有overflow:hidden;
想要里面的生效,需要你自己修改watermark样式为overflow: visible;可以生效,希望能帮到你!!!

@ArSrNa
Copy link
Author

ArSrNa commented Dec 26, 2023

image
zh直接在里面加不生效

@HaixingOoO
Copy link
Collaborator

是的,我測了外部style修改不行,使用外部custom-class來修改好了,不要用t-watermark來修改(因為會改所有的)

@ArSrNa
Copy link
Author

ArSrNa commented Dec 26, 2023

image
image
控制台里面看还是hidden
image

@HaixingOoO
Copy link
Collaborator

image

image

控制台里面看还是hidden

image

我晚点回复你吧,暂时电脑不在身边,不好意思

@ArSrNa
Copy link
Author

ArSrNa commented Dec 26, 2023

!important 可以生效,不过依靠外部控制的方式不太可靠,看看是不是可以给个选项设置overflow

@NWYLZW
Copy link
Collaborator

NWYLZW commented Dec 26, 2023

!important 可以生效,不过依靠外部控制的方式不太可靠,看看是不是可以给个选项设置overflow

相对来说,暴露出来的样式其实就是提供给你的选项配置,毕竟场景是相对来说复杂多变的,很难做到提供各种特化的配置,用户在使用的时候应该尽可能的使用 style 来解决问题。

HaixingOoO pushed a commit that referenced this issue Dec 28, 2023
* fix(watermark): 修复行内style引起的无法sticky定位问题

fix #2680

* test(watermark): test modify

* chore: update common

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>
@HaixingOoO HaixingOoO added the to be published fixed, not be published label Dec 28, 2023
NWYLZW pushed a commit that referenced this issue Jan 11, 2024
* fix(watermark): 修复行内style引起的无法sticky定位问题

fix #2680

* test(watermark): test modify

* chore: update common

---------

Co-authored-by: Uyarn <uyarnchen@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
to be published fixed, not be published
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants