当父溢出更改时,firefox 过渡会中断

2024-03-21

我今天遇到一个问题,花了我很长时间来调试,我在网上找不到解决方案,所以我认为记录下来会很有用

如果父级的“溢出”属性与转换一起更改,则转换似乎在 Firefox 上不起作用 - 即:

.parent { overflow: hidden; }
.parent:hover { overflow: visible; }
.child { opacity: 1; transition: opacity 1s linear; }
.parent:hover .child { opacity: 0; }

过渡对孩子不起作用。从悬停的父级中删除“overflow:visible”属性,一切正常。似乎改变孩子本身的溢出不会引起任何问题,这很奇怪。

这是一个 js 小提琴http://jsfiddle.net/qzMj9/13/ http://jsfiddle.net/qzMj9/13/

有谁知道为什么会发生这种情况?这是一个 ff bug 还是正确的功能?它可以在 webkit 上运行!


这看起来像https://bugzilla.mozilla.org/show_bug.cgi?id=625289 https://bugzilla.mozilla.org/show_bug.cgi?id=625289对我来说:父级正在重建其 CSS 框,这会丢失子级的旧计算样式,这意味着没有过渡开始,因为这是由计算样式更改触发的。

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

当父溢出更改时,firefox 过渡会中断 的相关文章

  • 无法在 Firefox 中显示我的 svg 图像?

    我无法在 Firefox 中显示我的 svn image 它在 Safari 和 Chrome 中工作正常 没有 IE 所以还没有测试过 它在我的html中是这样实现的 img 类 logo1 src images logo6 svg 其中
  • CSS 选择器在哪个方向进行验证?

    我记得不久前在网上看过一个视频 是雅虎工程师的演讲 他在视频中提到浏览器从右到左读取 CSS 选择器 而不是从左到右 意义 body header links a实际上会拉出页面上的所有锚点 过滤那些具有类父级的锚点links有一个班级的家
  • HTML:您可以隐藏/忽略浏览器查找中的文本元素 (CTRL+F)

    我有一个具有相当复杂的 UI 的 Web 应用程序 并且屏幕的一部分保留用于内容 如果可能的话 我想这样做 以便当用户使用浏览器的内置文本搜索 CTRL F 时 UI 中的任何文本都将被忽略 并且仅搜索实际内容 这可行吗 CSS 和 Jav
  • 在响应式设计中将顶部元素移动到底部的最佳方法是什么

    我有以下 HTML 格式 将给定元素放置在桌面上的顶部和移动设备上的底部 宽度 p I am on the top of desktop page and bottom of mobile page p 以响应式方式重新排序未知高度的元素最
  • 如何制作复选按钮? (带有标签的隐藏复选框作为按钮:仅限 CSS)

    Using 方法1 创建可点击标签 https stackoverflow com a 6293626 1326147 用 CSS 隐藏复选框 https stackoverflow com a 18078908 1326147 and 使
  • 使用“SVG 多边形”悬停状态在“SVG”之后淡入 div

    有没有一个只用CSS来解决这个问题的方法 我希望能够在 SVG 之后淡入 div 但前提是用户将鼠标悬停在 SVG 多边形上 代码看起来像这样
  • min-height 和 height 属性有什么区别? [复制]

    这个问题在这里已经有答案了 我查了一下这个问题 但无法理解它与我的具体问题的关系 我将有问题的 html 设置如下 div class container fluid div class inner div class weatherdat
  • CSS 3.0 用户选择属性替换

    我正在使用 CSS 3 0 它抱怨 用户选择 属性不存在 有谁知道合适的替代品或替代品是什么 user select is 回到规范 https drafts csswg org css ui 4 propdef user selectCS
  • Firefox Add-on SDK:如何使面板透明

    开发 Firefox 插件 任何人都可以帮助弄清楚如何使面板透明 这是显示面板的代码 var panel require sdk panel Panel width 570 height 250 contentURL require sdk
  • 阻止 div 容器调整大小

    我的 html 页面中有两列 一列向右浮动 另一列向左浮动 我已将两个容器的高度设置为 100 将两个容器的宽度设置为 50 我希望这两个容器适合中间的窗户 当用户水平调整窗口大小时 我不希望内容调整大小 我怎样才能做到这一点 Thanks
  • 如何允许点击穿过 div 但仍然对悬停做出反应?

    说我有divA部分重叠的divB 我怎样才能允许点击divA穿过去divB但仍然有hover悬停时触发divA 我知道pointer events none 这使得点击通过 但也阻止了悬停 我也尝试过以下方法 但它不允许点击失败 docum
  • iOS 中输入字段显示不同大小

    我有一个带有背景和固定宽度 高度的输入字段 它在我桌面上的所有浏览器中看起来都很好 但由于某种原因 它看起来更大iPad and iPhone 我在 CSS 中尝试了一些技巧 但到目前为止没有任何效果 width 120px importa
  • 这个 HTML5
    元素有什么问题?

    div div
  • 表单输入不会采用百分比填充

    如果使用像素填充 我的表单输入会正确显示 但使用左侧和右侧的百分比填充会破坏它 我不明白为什么 它可以在 Safari 中运行 但在 Firefox 3 5 3 OSX 中损坏 问题是 当我使用百分比填充时 填充全部中断 因此输入值没有很好
  • 某些表格后的分页符

    我的问题是 我有一个页面 其中包含几个要打印的 html 表格 有些表有很多行 有些则没有 我想要做的是将第一个和第二个表 大表 打印在单独的页面中 其余表 小表 每页打印两个 如何在我想要的位置放置分页符 我试过 但这会在每个表格后面添加
  • 浮动标签和占位符重叠

    div class form group form default form spacing div
  • CSS 网格最小内容不适合内容

    我试图通过显式分配行 列和元素大小来将一些 div 放入网格中 并允许 CSS 网格使用以下 CSS 执行列和行大小调整工作 display grid grid auto columns min content 价值min content应
  • 半流体布局 CSS/Html

    我有一个两列布局 其中右列的静态宽度为 350px 左列的宽度应填充页面的其余部分 或者至少这是我想要发生的事情 但不幸的是事实并非如此 看一下我的 css html http jsfiddle net CmJ7P http jsfiddl
  • React Native 中 fontAwesome 图标的圆形轮廓

    我想使用 fontAwesome 图标 使其位于圆圈的中间 我想将它用作一个图标项 我读到我们可以将它与圆形图标一起使用并将其放置在其中 但我无法使其工作 import IconFA from react native vector ico
  • Google 地图 v3 - 阻止 API 加载 Roboto 字体

    Google 将样式添加到地图容器中以覆盖我的样式 我知道如何解决这个问题 但API v3 8 9 exp 还加载了我并不真正需要 想要的网络字体 Roboto 有什么设置 选项 方法可以解决这个问题吗 我可以阻止 API 添加额外的 CS

随机推荐

  • 如何使用脚本重新创建 IPython 的“--pylab”选项的效果?

    我想创建一个与 IPython 执行相同操作的配置文件 pylab 用手 标记 为了实现这一目标 脚本的内容应该是什么 包导入 名称空间指定 设置等 作为替代方案 我还想知道是否有一种方法可以检查 pylab当前 IPython 会话启动时
  • 什么是 ls -F (ls --classify) [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 看着普通旧版的手册页ls http linux die net man 1 ls我看到有一个标志 F F classify append
  • Int 转换不起作用[重复]

    这个问题在这里已经有答案了 我正在为我的游戏创建高分功能 但无法让它发挥作用 这是我的方法 def game over self Game over Screen keys pygame key get pressed self gameo
  • 正则表达式麻烦,转义引号

    基本上 我正在传递一个字符串 我需要以与 nix shell 标记命令行选项大致相同的方式对其进行标记 假设我有以下字符串 Hello World Hello Universe Hi 我怎样才能把它变成一个三元素列表 你好世界 你好宇宙 H
  • magento 产品页面中买家需填写的字段

    我一直在寻找 但找不到类似的东西 我需要创建一个产品页面 买家在将产品添加到购物车之前将在其中填写一些文本字段 大部分类似于此页面的内容 http bitly com Sw4jzR http bitly com Sw4jzR 添加到购物车时
  • 在容器和主机之间共享“node_modules”文件夹

    这是一个非常热门的话题 但我从未真正找到解决方案 您可能知道 当我们在容器中有一个卷并且安装依赖项时 使用npm i或其他东西 从 Dockerfile 具有默认权限 Npm 将创建一个node modules容器中的文件夹root roo
  • 使用多线程 vb.net 时更新文本框

    My code Imports System IO Public Class Form1 Dim thread As System Threading Thread Dim thread2 As System Threading Threa
  • 如何在Python中比较两个时区?

    Example import pytz b pytz timezone Europe Rome c pytz timezone Europe Berlin 然而 这两个时区具有不同的名称但代表相同的事物 b c 返回 false b zon
  • RStudio Run命令运行两次问题[重复]

    这个问题在这里已经有答案了 我在使用 RStudio 时遇到了一个奇怪的问题 当我使用任何命令运行脚本时 例如 Ctrl R Ctrl Enter 或 RStudio 上的实际运行命令 该命令会运行两次 我在互联网上找不到任何与此相关的信息
  • C++、多态性和迭代器

    我想要一个存储接口 抽象类 和一组存储实现 SQLite MySQL Memcached 用于存储已知类的对象并从存储中检索子集 对我来说 清晰的界面是 class Storable int id blah blah blah string
  • JSP/GlassFish:如何正确设置 UTF-8 编码

    我正在寻求帮助 将堆栈中的所有层都转换为 UTF 8 编码 我发现这篇好文章 http www javapractices com topic TopicAction do Id 206 http www javapractices com
  • AWS - 错误 504 - 网关超时 - Flask 应用程序

    昨天 我在 Amazon Elastic Beanstalk 上部署了我的第一个 Flask 应用程序 应用程序正在运行 但当我按下启动抓取过程的按钮时出现问题 这个过程相当长 可能需要大约 3 4 分钟 显然在我按下按钮一分钟后 我收到了
  • 在 Microsoft SQL Server 中从十六进制文字插入 varbinary 值

    我有一个 SpringBoot 应用程序 我使用 jdbcTemplate 将一行插入到 mssql int numOfRowsAffected remoteJdbcTemplate update insert into dbo ELCOR
  • Python - 用 ASCII 字符替换 unicode 表情符号

    我当前的周末项目之一有问题 我正在编写一个 Python 脚本 它从不同来源获取一些数据 然后将所有内容输出到 esc pos 打印机 正如您可能想象的那样 POS 打印机并不完全喜欢表情符号 所以文本如下 可爱 给我这个字符串 u53ef
  • 如何在带有配置文件的 Powershell 脚本中使用自定义 WCF 代理?

    我在它自己的程序集中有一个手写的 WCF 代理 它非常简单 public class MyServiceClient ClientBase
  • 通过shields.io徽章添加SonarQube覆盖范围

    我有 com github xxxxxx xxxxxx Maven 存储库 我想添加盾牌徽章 但我有一个无效徽章 https img shields io sonar https sonarqube com com github norau
  • GMAIL SMTP:对 SSPI 的调用失败异常 - 不支持请求的功能

    我正在使用 gmail smtp 发送邮件 主机 smtp gmail com 端口 587 在 MVC 应用程序中使用 gmail smtp 发送邮件时出现异常 以下代码用于发送邮件 public static int SendMail
  • Three.js 的外观似乎被翻转了

    我这里有一个演示 测试场地 http www myuplay com game test html or Backup http direct myuplay com game test html 由于某种原因 即使鼠标矢量是正确的 我的对
  • R - 检测到非树模型!此功能只能与树模型一起使用

    我是 R 新手 当我尝试跑步时xgb importance 我得到这个 Error in xgb model dt tree feature names feature names text text Non tree model dete
  • 当父溢出更改时,firefox 过渡会中断

    我今天遇到一个问题 花了我很长时间来调试 我在网上找不到解决方案 所以我认为记录下来会很有用 如果父级的 溢出 属性与转换一起更改 则转换似乎在 Firefox 上不起作用 即 parent overflow hidden parent h