更新元素的文本使其消失

时间:2013-06-09 08:57:03

标签: javascript jquery css css3 google-chrome

在Chrome 27(Windows)中,当我更新特定元素的文本时,文本会完全消失,直到我将其“刷新”,但更改任何元素或窗口大小的CSS或其他任何内容。

Firefox很好,尚未尝试任何其他浏览器或操作系统(尚未)。我怀疑它是特定于Chrome的错误。我只是想确保我不会疯狂。

我正在使用:CSS3在某些地方进行转换;网络字体(没有它们测试,它仍然发生);嵌套位置:固定和z-index

它类似于this SO question但是当我禁用网络字体(并且退回到Arial然后sans-serif)时,它仍然会发生。我怀疑它与我正在进行的分层和CSS3转换有关。

元素更新是此容器中的DIV:

NAV {width:100%;height:50px;position:fixed;top:0;left:0;z-index:110;padding:15px 0;text-shadow:1px 1px 2px #FFF;font-size:110%;font-weight:500;color:#565656}

哪个包含在父页面中:

#pages {width:100%;position:relative;overflow-x:hidden}

#pages .page {width:100%;height:100%;position:absolute;top:0;left:0;padding-top:50px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}

我只在动画进入/退出页面时应用CSS3变换,但是在转换完成后发生错误:

#pages .page.left {-ms-transform:translateX(-100%);-o-transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%)}
#pages .page.right {-ms-transform:translateX(100%);-o-transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%)}

更新文本的代码(已修剪):

$('.page[data-page="Game"]').find('NAV .title').text('My text');

我还没有演示给你看,对不起。如果您需要更多代码,请在评论中告诉我(因为我相信您无论如何都会这样做)。我遗漏了HTML,因为我相信这是无关紧要的,除非你真的想看到它。

0 个答案:

没有答案