I have a rather strange problem on a site I designed. Every time you hover in or out of a link, the link element and in some cases its parent flashes white quickly. This happens on every link, not just the ones with transition effect or different hover color. On FF, everything works just fine. Also the white is not the bgcolor of body.
What makes it even more mysterious is that I haven't done any changes to the site. I only updated Chrome..
I would post an image too but as I am a new user I'm not allowed to, gotta do it as a link:
http://www.planetoidi.com/temp/hover.jpg
This is caused by a large class of bugs in Chrome which show a flash (white or black, depending on the bug) when transitioning to or from accelerated rendering. This can happen on hover when there is a CSS transition from the non-hover state.
A workaround is to ensure that the base state of the element is using accelerated rendering. One way is to add the following rule for your element (without the :hover selector):
-webkit-backface-visibility: hidden;
Source: http://www.sitepoint.com/fix-chrome-animation-flash-bug/
Related
I am using Bootstrap 4. But when opening the dropdown component the font color is slightly changed.
After looking for some color definitions which could be the problem (there aren't) I found something strange: when I disable the transform and the will-change property of the dropdown element, somehow the font-color is affected. See video here:
https://www.dropbox.com/s/xkhl4m6enwvdzcd/Video%20color%20bug.mov?dl=0
It's most noticeable in Google Chrome and on a Cinema Display (Video).
Also it seems the subpixel font rendering is affected: see screenshot here .
The fun thing: the font-color is rendered more accurately when it's off.
In Safari a font rendering issue also occurs ...
Any idea what is happening here?
(I can post a Code Pen, or see the id of it in the video.)
As Ilya Streltsyn and giovannipds have mentioned in the comments here and here, that's a normal side effect of alpha compositing (subpixel rendering), which is what the browser does as part of hardware-accelerated rendering (GPU) brought about by will-change and transform.
I'm not a web developer, but I was dabbling with 3D CSS transformations and animations and found that they didn't interact with :hover the way I hoped or expected. I wasn't able to readily find any disclaimer that this is a known problem, so I'm wondering if I'm just doing something wrong.
To reproduce the problem simply, start from this demo 3D cube animation here:
http://cssdeck.com/labs/simple-css3-3d-cube
Add this to the bottom of the style section:
#cube div:hover {
background-color: white;
}
I'm looking at that, using Chrome. I was hoping that, as both the cube rotated and the cursor moved (or didn't) the front-facing side containing the cursor would have a white background. But in practice that doesn't happen properly. If I scroll the cursor over the animation it picks out the correct panel to highlight but then it often fails to update when it should. Most noticeably, if I stop moving the mouse it doesn't seem to detect any change in what element the cursor might be hovering over.
Is this a known shortcoming? Does anyone have a solution?
It appears there's a difference in Chrome's Webkit engine vs Firefox's Gecko engine. Firefox continually runs to check a hover status, while Chrome does not.
I tested it in Chrome and Safari (both run Webkit) and they have similar results. They do not update the hover state if you keep the mouse still. Firefox, on the other hand, continually checks the hover area when the mouse remains in the same place.
While testing an SVG animation I've run into a rendering problem in Chrome Version 23.0.1271.95.
The animated triangles seem to leave some black vertical banding.
This goes away if you tab away from the page and back or if you otherwise force a redraw.
You can find the animation test here:
http://bit.ly/HexaGridTest
And here's a screenshot:
Looking at other posts on similar issues it seems that the only way to eliminate this GPU-acceleration-related problem is to force a redraw at the end of the animation.
Someone suggested adding -webkit-backface-visibility: hidden to the SVG, but this didn't solve the issue for me.
Is there any alternative? Any flag or CSS property I could set to avoid the artifacts?
I am trying to make a combobox in html and CSS, in which every item is on a separate line, and each line lights up blue when you mouse over it, like on Google. That much is easy. I have a div with links(a) in, and each link uses display:block in CSS to fill the whole div. Then I added a dotted outline to theone being hovered over, and that's where things went strange.
Here's the jsFiddle.
You can see it working if you hover over the top link, but the others don't seem to show the outline... The second one down is just visible at the bottom, but the others aren't there at all.
Any help would be appreciated.
EDIT: I'm in IE8 on Windows XP
http://www.w3schools.com/cssref/pr_outline.asp
"Note: IE8 supports the outline property only if a !DOCTYPE is specified."
If you're testing this in IE9, using Compatibility Mode, make sure that your Document Mode matches Internet Explorer 8 standards, not Quirks. If I switch mine to Quirks mode, the outline disappears.
I've an issue whereby if you are to hover upon an <li> element that has been skewed (from a CSS3 transform) and a shadow applied to it, the shadow it generates will then be rendered incorrectly. It's probably better to see the issue first-hand here - http://jsfiddle.net/mabbage/BLD5Z/1/
It seems this issue is confined to web-kit browsers (Chrome and Safari). Does anyone know of a workaround to this?
One thing I have discovered when playing around with it is if you remove the shadow of the nav object, then this whole issue disappears (however, I'd like a shadow behind the whole list).
The only solution I could find was to use PNG images to style the <li> elements and the shadow behind it. I'm putting this problem down as a CSS3 bug in webkit browsers.