In W7 Chrome the display is odd. After the screen refreshes, it looks good. But then if I load it with a cleared cache, the display is even weirder. In Windows 7 IE and FF, all looks great.
Anyone know how I can create a ‘fix’ for the Chrome? Or is there even an error on my part? Or is it the Chrome?
Site’s going live soon, and I would like to understand more why Chrome displays oddly. I can’t necessarily expect the user to know to refresh their browser screen to see it correctly can I?
See, that’s the weird part. When I first load the site, the bottom two photos run into the footer. Not only do I see it, but another person sees it as well. But when we refresh, all is well.
It’s just a queer thing, and I’m bothered that this may turn off users.
I figured out the issue but I need one more instance of hte page being broken to confirm the diagnosis. How do you get it to repeatedly appear for you (I realize that refreshing does fix it but how do you keep getting it to come back?)
Alright well it’s narrowed down to these two. Managed to get it replicated one last time.
The html,body{} having height:100%. Normally elements just overflow and doesn’t affect anything…but removing that seems to fix it. Why do you have that? You don’t seem to be ipmlementing any sort of sticky footer or anything.
Now to the more likely problem (the thing I think that’s ACTUALLY the problem…)
The <body> element having -webkit-backface-visibility:hidden;
I’m having trouble figuring out why you have that? But removing that also seems to correct the issue. Try removing both and see if it fixes it for you. If it does, add the height back in and then see if it breaks again, if it doesn’t, then we know it’s the backface rule.
The height of 100% was a forgotten CSS that I was using for a different design, originally.
The ‘-webkit-backface-visibility:hidden’ is a Bootstrap default, which I’ll consider removing, but I think the 100% height issue is the real cause since I can’t get the issue to repeat again after I removed the height.
Yeah with these type of “random appearing” issues, usually there are a lot of different “fixes” that can make a page appear to be fixed but in actuality it doesn’t fix it.
So I thought I’d just share what my opinions were regarding the fix was.
I was scanning your page and the structure, along with what the general structure of the page was (so when I had a good idea of how your page was, I could begin developing theories), and as I was moving through, I eventually reached the <body> element. You mentioned you only had this issue on Chrome and I saw the -webkit- code…so I began looking closely and you had height:100% on it which coincidentally also happened to end where the footer began (e.g. the broken display) so I first removed the height and it worked. I was still curious about the webkit rule so I kept refreshing until I got the display and when I did, I tried removing -webkit- and it also fixed.
I knew that that didn’t prove anything htough unless the core file was updated since I was only fiddling with the live version of the page (and as said in the above post, many “fixes” on random appearing problems don’t actually fix it. It lies to you). Compounding on the fact that usually when you have height:100% on the html,body{} like you did, it doesn’t screw up a page like it did with yours. It generally will just overflow. So I thought it was -webkit- rule (and it may still be; we won’t know) but the removing the height also worked and since the -webkit- rule is part of bootstrap I wouldn’t bother messing with it. Obviously you can mess with bootstrap if you know what you are doing but considering your page didn’t warrant the height:100% on html,body{} it’s probably for the best since the page structure gets to be more stable and you didn’t mess with bootstraps core CSS file.
This is actually a common bug with webkit-backface-visibility:hidden and although it fixes and stabilizes animations because it triggers hardware acceleration it can have detrimental effects.
There are repainting issues on positioned elements and in some cases position:fixed elements that are children will lose their fixed positioning.
Some of this seems to be by design because when you animate an element the meaning of fixed children does not really compute when you may be rotating or transforming the element.
Therefore I would not advocate adding -webkit-backface-visibility to the body by default unless it was to fix an animation bug in the current project.
I felt like you had spoken on this topic before but I was unable to find anything. What also led me to thinking it was -webkit- was this inkling in my head that you had brought this up before. Thanks for the link.
Yes its cropped up a couple of times now but the details are always hard to find.
I guess in time the repaint issue will get fixed but I think the fixed positioned problem is here to stay as that seems to be by design and indeed webkit have now changed the stacking context behavior of fixed positioned elements anyway.
