Question

我们遇到了新的Firefox（版本34.0.5）中消失元素的奇怪错误。

错误发生在包含两个（或更多）flash对象的页面上，这些对象位于html中的另一个元素之前。每当加载页面时，元素就会消失。

您可以在此演示中看到它： FF 34 Flash Bug

只需在最新的Firefox中打开它，您就会看到红色div消失。该页面的每次重新绘制都会再次显示，例如切换浏览器选项卡或通过开发工具编辑css。

当它正常工作时
- 一个闪存文件 - 无论位置如何 - 将所有flash文件放在html中的元素之后 - 下面有一个flash文件，另一个元素上面有一个flash文件（html结构）

我们尝试了什么 - 它产生了什么
- 加载Flash文件后重新绘制页面（我们使用SWFObject添加flash文件，但我们无法将加载事件附加到文件中） - 在第一次加载页面时工作（缓存清除）），刷新后不起作用（F5） - 页面加载后，滚动，调整大小，更改标签有用 - 然后可以看到元素（在某些情况下） - 使用文档末尾的js创建宽度/高度的元素 - 有助于首次加载，刷新后不起作用。
- 使用css动画对象无限的不透明度（我们有一个闪存文件的包装并为此设置动画） - 工作（不是永久解决方案）
- 具有“透明”以外的“wmode”的Swf对象（对我们来说不是可接受的解决方案）

我们所知道的
- 只有当元素下方有超过一个闪存文件时才会发生错误 - 闪存版本15和16（这些都经过测试）发生错误 - 在mozilla 34.0.5中发生了错误（这个是经过测试的） - 闪存文件后的多个元素也将消失 - 第一次打开页面时，它不显示元素。如果你多次刷新（F5），在某些情况下它会正常显示所有内容，并且在某些情况下它不显示元素，也不显示重叠的一个或两个闪存文件。

当前解决方案
不断浏览器重新绘制消失的元素（或元素！）。我们使用一个简单的CSS3动画来实现这一点，该动画可以在0.97和1之间无限制地激活不透明度，持续时间为1秒。

JavaScript的：

if( navigator.userAgent.match(/Firefox\/3[4-9]/i) ){
    $('.animation').addClass('firefox34FlashBug');
}

CSS：

.firefox34FlashBug {
    animation: 1s linear 0s firefoxFix infinite;
}

@keyframes firefoxFix {
    0% {
        opacity: 0.97;
    }
    100% {
        opacity: 1;
    }
}

这是一个非常hacky而不是一个很好的解决方案，但我们能找到的唯一“修复”不会改变html的结构（我们需要在项目中的其他元素下面有多个flash文件）。

有没有其他人遇到同样的问题？我们知道有几种方法来处理这种行为，但我们还无法解释它。

非常感谢您提前！我希望我们能找到一个处理这个问题的好方法，并且我们可以找到FF 34中新忍者元素的解释;-)。

更新＃1：

将border: 1px solid transparent;应用到每个对象周围的容器中将其固定在演示中（另请参阅akmozo答案中的注释）。

Answer 1

这对我有用：

添加到CSS：

.firefox34FlashBug {
    animation: 1s linear 0s firefoxFix infinite;
}

@keyframes firefoxFix {
    0% {
        opacity: 0.97;
    }
    100% {
        opacity: 1;
    }
}

将class =“firefox34FlashBug”添加到flash外的容器div

注意：演示网址“FF 34 Flash Bug”无效，您需要添加“index.html”。 IE http://quickbm.com/ff34flashbug/index.html

感谢您的解决。

Answer 2

我认为问题是因为你的swf对象有绝对位置。

为避免此问题，您可以将swf对象放入容器中，然后使用z-index选择它的深度比较其他元素：

CSS：

.ninja-element {

    z-index: 2;
    position: absolute;

    ...

}
.objects {

    z-index: 1;
    position: absolute;

    ...

}

HTML：

<div class="objects">
    <object>

        ...

    </object>
    <object>

        ...

    </object>

    ...

</div>

<div class="ninja-element">
    Watch me disappear in FF 34!
</div>

Answer 3

我遇到了同样的问题，但对我而言，它迫使浏览器重绘一次。添加完所有SWF对象后，我添加了这一行（$(document).ready(function()内的所有内容）：

$('#wrapper').css("transform", "scale(1)");

其中#wrapper是消失元素周围的div。 Scale（1）强制重绘，但不应改变设计的任何内容（除非你已经使用了该元素的比例）。

编辑：

或者更好：$('#wrapper').css("-moz-transform", "translatez(0)");，因为这也会强制重绘，但仅限于Firefox。

Answer 4

把它扔给其他人。

如果父元素中的position: fixed元素已经使用left（或其他内容）进行了移动，那么

就会瘫痪床。

解决这个问题。转而使用translate替换您的父元素。

花了好几个小时试图让这些黑客之一工作才解决这个问题...... :(

除非页面重绘，否则Firefox 34会导致元素消失

更新＃1：

4 个答案: