混合混合模式在溢出和行为不一致。

huangapple
go评论88阅读模式
英文:

Inconsistent behaviour when using mix-blend-mode with overflow and

问题

我在Safari中遇到了一个奇怪的问题，似乎CSS属性mix-blend-mode会导致父元素（.numWrap）的overflow:hidden停止起作用。下面是我分离出来展示这个问题的一些CSS/HTML示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.     
  10.     body {
  11.         background-color: #aeccab;
  12.     }
  14.     .numWrap {
  15.         font-size: 80pt;
  16.         width: 500px;
  17.         height: 500px;
  18.         display: flex;
  19.         border: 1px solid rgb(255, 0, 0);
  20.         flex-direction: column;
  21.         align-items: center;
  22.         overflow: hidden;
  23.         position: relative;
  24.         border-radius: 2rem;
  25.         z-index: 25;
  26.     }
  28.     .numWrap-shadow {
  29.         position: absolute;
  30.         border-radius: 2rem;
  31.         border: 1px solid rgb(67, 29, 204);
  32.         mix-blend-mode: multiply;
  33.         width: 100%;
  34.         height: 100%;
  35.         box-shadow: inset 18px 18px 36px #a1a1a1c8;
  36.         z-index: 19;
  37.     }
  39.     .time,
  40.     .time-alt {
  41.         color: rgba(76, 85, 71, 0.876);
  42.         border: 1px dashed rgb(230, 0, 255); 
  43.         height: 100%;
  44.         width: 100%;
  45.         font-size: 300%;
  46.         text-align: center;
  47.         align-items: center;
  48.         transition: linear;
  49.         transition-duration: 200ms;
  50.         transition-property: transform;
  51.         overflow: hidden;
  52.         position: absolute;
  53.         display: flex;
  54.         justify-content: center;
  55.         transform: translateY(0%);
  56.         will-change: transform;
  57.         background-color: #dedede;
  58.         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  59.     }
  60.     </style>
  61. </head>
  62. <body>
  63. <div class="numWrap hoursWrap">
  64.     <div class="numWrap-shadow"></div>
  65.     <div class="time-alt time--hours inactive"><span>00</span></div>
  66.     <div class="time time--hours"><span>00</span></div>
  67. </div>
  68. </body>
  69. </html>

在开发工具中禁用mix-blend-mode会恢复到预期的行为。这个问题在Chrome和Firefox中并不会出现（我进行了大部分的实际测试）。

英文:

I'm experiencing a strange result in Safari where it seems the CSS attribute mix-blend-mode seems to stop overlow:hidden of the parent (.numWrap) div from working. The example below is a snippet of the overall project, which is a flip-style timer app.

The use of mix-blend-mode is preferred as allows the shading to more naturally fall on the card below.

Behaviour in Safari (all devices)

Behaviour in Chrome

See below some CSS/HTML I've isolated, exhibiting this behaviour.

  2. &lt;!DOCTYPE html&gt;
  3. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5. &lt;meta charset=&quot;UTF-8&quot;&gt;
  6. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  7. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8. &lt;title&gt;Document&lt;/title&gt;
  9. &lt;style&gt;
  10. body {
  11. background-color: #aeccab;
  12. }
  13. .numWrap {
  14. font-size: 80pt;
  15. width: 500px;
  16. height: 500px;
  17. display: flex;
  18. border: 1px solid rgb(255, 0, 0);
  19. flex-direction: column;
  20. align-items: center;
  21. overflow: hidden;
  22. position: relative;
  23. border-radius: 2rem;
  24. z-index: 25;
  25. }
  26. .numWrap-shadow {
  27. position: absolute;
  28. /*top: 0;
  29. bottom: 0;
  30. border-radius: 2rem;
  31. /*background: linear-gradient(to right bottom,
  32. rgba(226, 219, 205, 0.753),
  33. rgba(255, 255, 255, 0.1));*/
  34. /*left: 0;
  35. backface-visibility: hidden;
  36. right: 0;*/
  37. border-radius: 2rem;
  38. border: 1px solid rgb(67, 29, 204);
  39. mix-blend-mode: multiply;
  40. width: 100%;
  41. height: 100%;
  42. box-shadow: inset 18px 18px 36px #a1a1a1c8;
  43. z-index: 19;
  44. }
  45. .time,
  46. .time-alt {
  47. color: rgba(76, 85, 71, 0.876);
  48. border: 1px dashed rgb(230, 0, 255); 
  49. height: 100%;
  50. width: 100%;
  51. font-size: 300%;
  52. text-align: center;
  53. align-items: center;
  54. transition: linear;
  55. transition-duration: 200ms;
  56. transition-property: transform;
  57. overflow: hidden;
  58. position: absolute;
  59. display: flex;
  60. justify-content: center;
  61. transform: translateY(0%);
  62. will-change: transform;
  63. background-color: #dedede;
  64. box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  65. }
  66. &lt;/style&gt;
  67. &lt;/head&gt;
  68. &lt;body&gt;
  69. &lt;div class=&quot;numWrap hoursWrap&quot;&gt;
  70. &lt;div class=&quot;numWrap-shadow&quot;&gt;&lt;/div&gt;
  71. &lt;div class=&quot;time-alt time--hours inactive&quot;&gt;&lt;span&gt;00&lt;/span&gt;&lt;/div&gt;
  72. &lt;div class=&quot;time time--hours&quot;&gt;&lt;span&gt;00&lt;/span&gt;&lt;/div&gt;
  73. &lt;/div&gt;
  74. &lt;/body&gt;
  75. &lt;/html&gt;

I've worked through all parts of the relevant CSS to identify the issue. Disabling the mix-blend-mode within DevTools returns to the expected behaviour. This is not an issue in Chrome or Firefox (where most of my live testing has occured).

答案1

得分: 0

如果有人遇到这个问题，我已经解决了。我认为这与WebKit奇怪地处理堆叠上下文有关（尽管我不太清楚这意味着什么）。

为了解决这个问题，我将 numWrap-shadow 从 numWrap div 中移出，并创建了一个新的容器 div 来容纳它们，将必要的属性转移过去。

如果有进一步的问题，我愿意尽力提供更多解答！

英文:

If anyone encounters this issue, I have solved it. I think it has something to do with WebKit handling stacking contexts oddly (though I'm not clear on what that means).

To solve this, I moved numWrap-shadow out of the numWrap div and created a new container div for both, transferring the necessary attributes.

If anyone has further questions, happy to expand where I can!

huangapple
  • 本文由 发表于 2023年2月27日 05:02:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/75574994.html
  • css
  • mix-blend-mode
  • overflow
  • safari
  • webkit
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定