does anyone know why on webkit browsers (chrome, opera), images on hover are blinking? This case is only on second column. There is an example http://codepen.io/anon/pen/fxJAk
How can I fix it? Is it only webkit browsers bug? It works properly on firefox and even on Internet Explorer 11.
It's on chrome Version 33.0.1750.146, Opera 20.0.1387.64
The usual workaround (for WebKit) is to add:
img {
-webkit-transform: translateZ(0);
}
Updated codepen
Try add css rules for img below:
-webkit-transform:(0);
-moz-transform:(0);
-o-transform:(0);
transform:(0);
http://codepen.io/anon/pen/FpwIy
Related
I am using CSS transformations to zoom in and out in the browser, but it looks ugly in Firefox even though it looks good in Chrome and Edge!
Firefox:
Edge:
Chrome:
What can I do?
1st check the console and if there any errors solve it.
also try out with
#-moz-document url-prefix() {
.class {
property:value;
}
}
or
-moz-transform:
it may work
Firefox does renders images as good as Chrome and Edge(thumbs up), so for now you can use a image of bigger dimensions and use CSS to fit to shrink into the container(DIV). Then you can use CSS transformations to give zooming effect.
Thanks.
I'm making a website with a lot of css transform (rotate:45deg) but i have few issues with blurry text/images.
I did a jsfiddle with an example.
http://jsfiddle.net/4pjsh/
In Chrome, i added "hardware acceleration" to fix the blink/crappy effect during animations but images and text are now always blurry. I searched and tryed lot of things but can't find a way to have them clean.
In Firefox 27-, it works fine but since mozilla released firefox 28/29, when blocks are animating, images are blurry.At the end of the animation, they come back clean.
Somebody knows how to fix that? if it's possible...
Thanks
I removed all rotates, and "started over". Somehow I got rid of the blur in chrome at least.
http://jsfiddle.net/4pjsh/6/
So right now, I'm only rotating like this:
.gridd .item {
-webkit-transform: rotate(45deg);
}
.gridd .zonelogo img {
-webkit-transform: rotate(-45deg);
}
.gridd .item .blockMore p { //You don't need to be this specific
-webkit-transform: rotate(-45deg)
}
Sorry, only had time to do the -webkit ones :)
Issue
Using the following just simply doesn't work properly in -webkit- and -moz- browsers:
#exampleElement {
background-color: red; /* For example */
}
#exampleElement ::selection {
color: black;
background-color: white;
}
Result: WebKit- and Blink-powered browsers
In Chrome, Opera, and Safari, ::selection's background-color renders as if it was 50% alpha but the font colour is correct.
Chrome 29.0.1547.62:
Opera 15.0.1147.130:
Safari 5.34.57.2:
Result: Gecko-powered browsers
In Firefox, the entire ::selection rule is ignored. ::selection's background-color just happens to be white due to #exampleElement's dark background-color (thanks to #BoltClock for noticing that)
Firefox 22.0:
Result: Trident-powered browsers
In Internet Explorer, (would you believe) everything is rendered perfectly.
Internet Explorer 10.0.9200.16660:
Is this just a flaw of these rendering engines / browsers or are there -webkit- and -moz- alternatives that I'm unaware of?
I've saved an example of this on jsFiddle, for people to see: http://jsfiddle.net/BWGJ2/
According to quirksmode.org, -webkit-selection and -moz-selection are indeed available. I just tested it with Chrome (18) and Firefox (13) and can confirm that it works with Firefox, but I didn't have success with -webkit-selection on Chrome (it ignored it), and according to this SO question it doesn't exist (and the answer says that ::selection should also work on all browser, but doesn't for me, too).
As already metioned in this answer, Chrome forces the selection to be transparent, but you can work around this using
background:rgba(255, 255, 255, 0.99);
For more details, checkout the linked answer by tw16
Furthermore, this works for me on FF:
::selection { /* stuff */ }
::-moz-selection { /* stuff */}
But this does not:
::selection, ::-moz-selection { /* stuff */ }
But maybe this is not related to ::selection but does apply on all pseudo elements, couldn't find an answer to that.
There are browser-dependent versions. The version you're using was the standard CSS3 way, but then it got dropped from the spec. I dunno about its browser support...
And something else to consider: An ID-based CSS selector might "outweigh" a pseudoclass-based selector, resulting in the ID-based CSS always taking precedence. So try adding !important to your ::selection style to make sure it's always used when applicable.
Hope that helps!
I have this :
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(210,210,210,1)));
Its working for all browsers and for IE9 , but not working for IE6
Can someone tell me what to use else
Regards
You need to use IE's old filter rules, the rule you mentioned in the question has a vendor prefix which is targeting webkit (chrome, safari etc) browsers only. - there's a neat generator here which will help you out in making cross-platform gradients. IE6-9's rules look like this:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 *
The webkit prefix only works in Webkit browsers, which are Chrome, Safari, and Android and iPhone. For example, you'd need to use -moz for Firefox, and -o for Opera.
IE6 doesn't have any gradient support at all, so you'll need to use an image instead, or drop IE6 support, which is probably a good choice; not many users are still on IE6. (Unless this is meant for use specifically in for example governments, they're often stuck.)
Internet Explorer gradient filter doesn't support color-stop, gradient angle, and radial gradient. That means you can only specify either horizontal or vertical linear gradient with 2 colors: StartColorStr and EndColorStr.
Internet Explorer 8 and lower aren't the only browsers that don't support gradients, so using filters won't catch all browsers.
Another approach is to use Modernizr to feature detect support and use a fallback image or solid colour.
For example:
#box {
// Normal gradient syntax
}
.no-cssgradients #box {
// Fallback image
}
I just upgraded to Chrome 12 and I'm noticing that my "meter" styling no longer works on chrome.
I was using something like:
meter::-webkit-meter-horizontal-optimum-value,
meter::-webkit-meter-horizontal-suboptimal-value,
meter::-webkit-meter-horizontal-even-less-good-value {
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cea), to(#7a3));
}
It was working fine until I updated to Chrome 12.
Interestingly, I can no longer see the user agent styles for these pseudo-elements with the web inspector, even on other sites that I visit. For an example, inspect Bruce Lawson's experiment:
http://people.opera.com/brucel/dev/html5-meter-style.html
I've also tried going over the user-stylesheet on the webkit trac page:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Is there a new way to style meters in Chrome?
I filed a bug with the Chrome dev team and it turns out Chrome 12+ require you to reset the default user-agent styling with "-webkit-appearance: none" prior to being able to override the element with one's own styling.
More specifically, one needs to add the following rule:
meter { -webkit-appearance: none; }
Here's the link to the ticket:
http://code.google.com/p/chromium/issues/detail?id=86009
Here's a jsFiddle:
http://jsfiddle.net/F8tJu/1/