在 will-change:transform 之后保持溢出:隐藏行为

2024-04-06

我有一个父元素和一个子元素:

.parent {
  will-change: transform;
  overflow: hidden;
  position: absolute;
}

.child {
  position: fixed;
  top: 80px;
  left: 80px;
}

without will-change:transform style, .child元素无论父元素的位置如何overflow:hidden将基于窗口定位。
现在既然.parent不仅有这种风格top and left of .child计算自.parent, 但是也overflow:hidden适用于.child too.
看起来position:fixed如果我们添加将被完全忽略will-change:transform
看看这里:https://jsbin.com/beluweroti/1/edit?html,css,输出 https://jsbin.com/beluweroti/1/edit?html,css,output

Note:我不添加这种风格.parent,所以我不能简单地删除它。

我可以处理定位,并设置正确left and top,但问题是
我怎么能忽视overflow:hidden对于固定位置的孩子?


From 规格 https://drafts.csswg.org/css-will-change/#will-change:

如果属性的任何非初始值都会导致元素为固定定位的元素生成包含块,指定 will-change 中的属性必须导致元素为固定定位元素生成包含块

所以基本上你面临的是转换问题,而不是意志改变问题,因为:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.ref https://www.w3.org/TR/css-transforms-1/#transform-rendering

因此,变换正在为固定位置元素创建一个包含块,并且will-change应该做同样的事情,因为.parent现在是固定元素的包含块,它也会对其应用溢出。

如果您无法删除,基本上您什么也做不了will-change属性或更改其值.parent

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 will-change:transform 之后保持溢出:隐藏行为 的相关文章

随机推荐

  • 当属性名称为参数时如何查询属性值?

    通常我们可以查询属性值 例如 Match n Product where n name iPhone X return n 但是 就我而言 我不知道应该匹配哪个属性 但我只知道值 在这种情况下属性名称就变成了一种变量 我想要这样的东西 Ma
  • 如何收到 wifi 网络状态变化的通知?

    我正在编写一个通过 wifi 连接到 telnet 服务器的应用程序 我有一个管理套接字连接的服务 一切正常 但当手机休眠时 它会断开 wifi 无线电 这会导致套接字连接中断 并抛出 SocketException 我觉得我应该能够设置一
  • 如何在 Windows 中使用命令提示符创建多个空文件

    我正在开发一个项目 需要创建多个空文件 过去 我使用过 touch 命令 但这只能让我一次创建一个文件 有没有办法在 Windows 中使用命令提示符创建多个空文件 我感谢您提出的任何建议或解决方案 谢谢你 A FOR循环将允许您创建任意数
  • alias_method 和 class_methods 不能混合使用吗?

    我一直在尝试修补全局缓存模块 但我不明白为什么这不起作用 有没有人有什么建议 这是错误 NameError undefined method get for module Cache from irb 21 in alias method
  • 使用 Dataset API 在 Tensorflow 中批量滑动窗口

    有没有办法修改一批图像的组成 目前 当我创建例如大小为 4 的批次 我的批次将如下所示 Batch1 Img0 Img1 Img2 Img3 第2批 Img4 Img5 Img6 Img7 我需要修改批次的组成 以便它只会转移到下一个图像一
  • 运行 .net 应用程序而不安装 .net 客户端配置文件?

    我在framework 4 0中构建了一个c net应用程序 我不反对为客户端的电脑安装 net 但是在客户端安装它太大了 这不可能有一些小的安装程序或redist包吗 安装并有助于轻松运行 net 应用程序 因为仅为小型应用程序安装完整的
  • 在 Go 中不睡眠的情况下测试异步结果

    我的代码中有相当多的组件具有持久的 go 例程 用于侦听事件以触发操作 大多数时候 他们没有理由 除了测试之外 在完成该操作后发回通知 但是 我的单元测试正在使用 sleep 来等待这些异步任务完成 Send notification ev
  • JUnit 4 与 TestNG - 更新 2013 - 2014 [已关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 JUnit 4 和 TestNG 曾经具有可比性 这两个测试框架有何优缺点 我今天比较了 TestNG 和 JUnit4 以我有限的测试框架经验
  • 将区间表示法解析为 Guava Range

    我需要将包含标准间隔表示法 即 8 100 6 10 等 的字符串解析为 Guava Range 对象 我将如何在 Java 中做到这一点 是否有一个实用程序包可以将字符串解析为构建 Guava Range 对象所需的组件 如果我们看一下这
  • 无法读取未定义的属性“native-element”

    我用的是离子2 我需要获取 HTML 元素值 其实我用的是viewchild 这是我的html模板代码 div class messagesholder last callFunction div p class chat date cha
  • 检索已排序的可手动实例内的隐藏标头

    使用时手动表 http handsontable com 似乎很难从上下文菜单中检索行的标题 考虑以下数据源 var data function return 1212 roman i ii iii 3121 numeric 1 2 3 4
  • 在 JavaScript 中覆盖对象的括号 [index] getter/setter?

    我目前正在构建一个双向链表 http en wikipedia org wiki Doubly linked list执行 我正在尝试 或希望 做的是使用 setter getter 来设置列表中的元素 就像在数组中一样 var index
  • 如何使 svg 元素(例如矩形)scrollIntoView?

    我在图形面板中有一个 svg svg 中的所有节点都在另一个面板中列出 我希望通过单击节点列表中的节点 svg 可以滚动到该节点 每个节点都是一个矩形 但我发现只有上边框在视图中 而节点的其余部分仍然在视图之外 有什么办法可以解决这个问题吗
  • 有人有使用 Python Zeep 和 Mock 对 SOAP API 进行单元测试的示例吗?

    我正在构建一个使用 Python zeep 访问第三方 SOAP API 的 Python 应用程序 我想使用模拟响应来实现一些单元测试 因为我并不总是有一个实时服务器来运行我的测试 我是单元测试的新手 不太确定从哪里开始 我见过使用模拟与
  • Java 因实现访问权限较弱的接口方法而出现错误

    当我编译这段代码时 interface Rideable String getGait public class Camel implements Rideable int x 2 public static void main Strin
  • 在codeigniter中上传doc和docx文件

    大家好 我在 codeigniter 中上传 doc 和 docx 文件时遇到麻烦 我检查了 config mime php 中的 mime 类型 谁能告诉我有什么问题吗 以下是我的 mime php 文件 doc gt applicati
  • Fabric js 或 imagick 从图像中删除白色

    我遇到了这种情况 我很难在谷歌上搜索并解释 我们公司在铝上打印照片 我们为客户提供两种选择 第一个选择是将他们的照片打印在铝上 就像 他们把照片给了我们 所以如果照片有白色 背景 图片以白色背景打印 简单的 像那样 第二个选项是我们可以打印
  • CSS3 FlexBox 过渡

    在这个 codepen 示例中 http codepen io DrYSG pen ovctn http codepen io DrYSG pen ovctn我创建了三个弹性盒 我想要的效果是 当鼠标悬停在中间框上时 它的尺寸会增大 演示中
  • 允许 Discord Rewrite 机器人响应其他机器人

    我有一个 Discord 机器人和一个用于 Discord 频道的 Webhook 设置 用于每小时准时发送一条命令 然而 Discord Rewrite 默认情况下似乎会忽略从其他机器人发送的命令 我该如何禁用此功能 我是否需要修改每个命
  • 在 will-change:transform 之后保持溢出:隐藏行为

    我有一个父元素和一个子元素 parent will change transform overflow hidden position absolute child position fixed top 80px left 80px wit