In Chrome 27 (Windows) when I update the text of a specific element, the text disappears completely until I make it "refresh" but changing the CSS of any element or window size or whatever.
Firefox is fine, haven't tried any other browser or OS (yet). I suspect its a Chrome-specific bug. I just want to make sure I'm not going insane.
I am using: CSS3 transforms in some places; web fonts (tested without them and it still happens); nested position: fixed and z-index
It's similar to this SO question however when I disable web fonts (and falled back to Arial then sans-serif) it still occurs. I suspect it has something to do with the layering I'm doing and CSS3 transforms.
The element updating is a DIV within this container:
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}
Which is wrapped in a parent page:
#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}
I apply CSS3 transforms only when animating pages in/out, however the bug occurs after the transform is complete:
#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%)}
The code that updates the text (trimmed down):
$('.page[data-page="Game"]').find('NAV .title').text('My text');
I don't have a demo to show you yet, sorry. If you need more code, please let me know in the comments (as I'm sure you would do anyway). I've left out the HTML because I believe it's irrelevant unless you really want to see it.