Skip to content

fix: operations are overridden when their opacity is not 1 #139

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.

Sign up for GitHub

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

Jump to bottom
Merged
afc163 merged 1 commit into from
Nov 9, 2022
Merged

fix: operations are overridden when their opacity is not 1 #139

afc163 merged 1 commit into from
Nov 9, 2022

Conversation

@JarvisArt
Copy link
Contributor

@JarvisArt JarvisArt commented Nov 8, 2022

operations（操作条）在过渡动画运行中 opacity（透明度）不为 1 时，会被 fixed 定位且层级高的 dom 遮挡

2022-11-08.20.36.38.mov

以下代码可以复现上面的场景：

<!DOCTYPE html>
<html lang="en">
<style>
  div{
    width: 100px;
    height: 100px;
  } 
  #a {
    background:red;
    position: fixed;
    top: 0;
    z-index: 9999;
  } 
  #b {
    background:blue;
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 9;
  } 
  #c {
    background:green;
    left: 40px;
    top: 40px;
    position: fixed;
    z-index: 10;
  } 
</style>
<body>
  <!-- <div style="opacity: 0.9; position: fixed; z-index: 9999;">
    <div id="a">1-可覆盖其他</div> 
  </div> -->
  <div style="opacity: 0.9">
    <div id="a">1-被遮挡</div> 
  </div>
  <div id="b">2</div> 
  <div id="c">3</div> 
</body>
</html>

@vercel
Copy link

vercel bot commented Nov 8, 2022 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
image ✅ Ready (Inspect) Visit Preview Nov 9, 2022 at 2:58AM (UTC)

@xsjcTony
Copy link

xsjcTony commented Nov 8, 2022

Nice one. Just figure out the issue and this seems a valid fix.

@JarvisArt JarvisArt force-pushed the fix-operations-cover branch from d269ee2 to 98ab5b4 Compare November 9, 2022 02:56
@codecov
Copy link

codecov bot commented Nov 9, 2022 •
edited
Loading

Codecov Report

Merging #139 (e191065) into master (f4f66c2) will not change coverage.
The diff coverage is n/a.

❗ Current head e191065 differs from pull request most recent head 98ab5b4. Consider uploading reports for the commit 98ab5b4 to get more accurate results

@@            Coverage Diff            @@
##            master      #139   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files            5         5           
  Lines          283       283           
  Branches        88        88           
=========================================
  Hits           283       283
Impacted Files Coverage Δ
src/Preview.tsx 100.00% <ø> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@afc163 afc163 merged commit 1e28250 into react-component:master Nov 9, 2022
@afc163
Copy link
Member

afc163 commented Nov 9, 2022

https://github.com/react-component/image/releases/tag/v5.11.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JarvisArt @xsjcTony @afc163