I have an element positioned fixed at the top of the screen, with a z-index of 100. When I scroll up the page in Chrome (V. 21.0.1180.82 on OS X and V. 21.0.1180.83 m on Windows) I notice a rendering problem which looks like this:
UPDATE:
I noticed that the rendering problem appears every time when the fixed element passes a new <section>...</section> during scrolling up. Chrome seems to have some issues related to HTML5 tags like <section>...</section> or <nav>...</nav>. Changing those to <div>...</div> solves the rendering problem, anyway I would still like to continue using HTML5 tags.
Does anybody know a "hack" to solve this problem?
Until then I will try to create a reproducible code sample and file a bug to chromium.
The cause of the issue where elements with an opacity of 0 inside the fixed element. Setting those to display: none solved the problem.
Particularly for Chrome latest browser version (55.0.2883.87 m (64-bit))
I have added:
-webkit-transform: translateZ(0);
Related
I have a weird rendering glitch on a webpage in google chrome. I reproduced it under Mac Chrome, and Chrome under a parrallels virtual machine in windows.
It's supposed to be a simple draggable div. But, when you drag it around, it looks like this: http://imgur.com/VdY3Tv2
The situation is pretty unusual; it's a container div with a css transform matrix, containing an iframe, with a draggable div.
I created a demo. Just drag the div around: https://www.dropbox.com/s/cjq39w82mghuze2/bug.7z?dl=0
Any idea what causes this?
[edit]
I still have no idea. But: updating the transform matrix of the parent element (in my case, I was using fit.js, and call watching.trigger()) forces a redraw. So, that might be a useful workaround that helps people. :)
I found an actual fix that is not stupid and half-working like my earlier attempt.
iframe {
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
To clarify, to any iframe in which you have this happening, apply the above CSS.
No more glitches. Stupid, I have no idea why it worked, but I just tried random things, and then this worked. I'm guessing it enables some kind of different rendering flow that avoids this bug, whatever it is.
If you view this codepen demo in Chrome and scrolldown you should see a piechart animation kick in when it comes into view. Yet in Safari Version 7.0.2 (9537.74.9) it doesn't. Any ideas why this isn't working in Safari?
http://codepen.io/s10wen/pen/czDbu
This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em. That line doesn't appear to be necessary, everything works fine without it.
This example doesn't have the bug: http://codepen.io/anon/pen/ktKmu.
I discovered this by removing bits of CSS & JavaScript until the bug no longer happened, revealing the single line that was causing it. Reduction ftw!
I´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
I am facing a strange problem where the a navbar I have created is displaying differently in Chrome than Firefox. Here is a screenshot of each. Firefox is displaying it correctly:
While the background colors are getting lost in Chrome:
I have created a fiddle here, but the problem is not apparent when viewed on the jsfiddle site using Chrome. In the live Chrome browser, the body declaration over-rides the definition for the navbar, even though z-index is used.. Any ideas on how to solve this strange issue? Im using an old version of Chrome right now (21.0.1180.90), trying to insure backwards compatibility. Thanks for your ideas!
Your code works fine tested in "live Chrome browser" 21.0.1180.89 (couldn't find the 21.0.1180.90) on OS X 10.8.2.
And I think you are missing the point of z-index:
For a positioned box, the 'z-index' property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a stacking context.
http://www.w3.org/TR/CSS2/visuren.html#z-index
z-index is not used to override any other css declaration.
You're code is working in Chrome version 24 , Firefox and Internet Explorer 10 . Maybe the problem is only in that version of Chrome or you override it somewhere else.
This seems to be a bug specific to firefox (version 7.0.1), I have copied the offending code into jsFiddle.
but jsFiddle DOES NOT REPRODUCE THE BUG. copy the code from jsFiddle into a blank html document and test it locally to see the issue.
http://jsfiddle.net/kCMeu/1/
This is the normal state of the menu items before you over over any of them:
This is the first sub_item when hovered over wiht the mouse:
And the third sub_item:
And now the last:
Where did that white margin come from around the #global_nav_box div? it only shows up on the hover state of the last sub item.
That is the bug I cant (conveniently) fix.
Fixes I've found are:
Setting the body tag 'margin-top:0px' - but that leave an unsightly margin on the left and right of the page.
Removing the 'z-index' property from the CSS for #global_nav_box - I thought i'd fixed it, until all the content on the page below scrolled over the div when you scroll on the page.
So why does it do this? Can you replicate this on Firefox? How can I fix it?
Thanks in advance.
Update: Ive had some of my friends test it and it (the bug) shows up for some and not for others, I have also tested in in Windows XP mode and it (the bug) still doesn't show up. All my testers were running Windows 7 and Firefox 7.0.1.
I've disabled all plugins and extensions on my install of Firefox and its still there. Insane.
Although I do not know what caused this issue I have found a clean solution for it :)
Could you not wrap the absolute positioned div in a fixed div like this: http://jsfiddle.net/HelloJoe/JXWNj
Source: HelloJoe
His solution from the previous thread that was the cause for this one fixed everything. :)