I can't find any info on this issue in Google, because every result is about the default purple a:visited color. That is NOT the issue here. The issue is with Chrome's default anti-aliasing, on some systems blue text shows up as blueish-purple. If I change the anti-aliasing to -webkit-font-smoothing: antialiased it keeps the correct color, but then the fonts are radically different between Chrome and Firefox. The blue color I'm using is the client's color, so it cannot change to purple like this. I'm hoping somebody has a fix for this.
Here are screenshots from tests I've done:
EDIT: Just to clarify, this has nothing to do with the default a:visited link color. My blue color is being inherited, but Chrome's anti-aliasing is causing the text to appear purple. Here's an example: http://jsfiddle.net/yvjjxfqt/
It gets solved (at least in my system) setting a transform in the element
a {
color: #1967b1;
display: block;
}
a:nth-child(2) {
transform: rotateX(0deg);
}
This is a link
This is a link
I guess that the rendering in the gpu doesn't have this problem
This is how it looks in my system
Another way to solve it seems to be using opacity
a {
color: #1967b1;
opacity: 0.99;
}
This is a link
Related
I have a strange bug that only occurs on Chrome - visited links ignore the color attribute and turn black. The chrome inspector shows the computed color as "white", even though it is clearly black.
This is NOT caused by :visited, as I'm using the same text color, whether it is visited or not.
Here's a minimal fiddle:
You need to visit wikipedia for the bug to appear.
This text should be white
This text should also be white, but isn't
Now, I know this is in part caused by "all: initial", but I need to use this to keep a consistent style in my webextension, since websites override random CSS properties.
If you're having issues with the visited color being overwritten by the browser defaults, are you able to instead set all to unset?
#popup {
all: initial;
}
#popup * {
all: unset;
display: block;
}
After looking around, not 100% sure why the browser color was overriding the visited anchor, even testing #popup * {color: initial;} rule worked, so I'm not sure what underlying mechanism is changing the text color. But looking over at the answer provided here https://stackoverflow.com/a/15903168/1440950 using unset clears the values as desired
I have just noticed strange behavior of semi-transparent text with negative letter-spacing in Chrome. Basically, this CSS leads to darker intersections:
div {
opacity: .5;
letter-spacing: -.2em;
}
Here's the screenshot:
Is there any CSS instruction to handle with this, so intersections will look the same in different browsers? Screenshot was made in Win Chrome 76.0.3809.100 (64-bit)
Fiddle → https://jsfiddle.net/yakunins/gcatnksh/
Looks more like bug in Chrome — https://bugs.chromium.org/p/chromium/issues/detail?id=1006140
My PSD contains something like this:
As you can see this is a simple background with a text block (color: #ffffff). I've applied a 3% opacity on the text layer like this:
When I try to reproduce this in CSS, the text color is far more darker in the browser and I don't understand why:
Here is the CSS
.a-text {
color: rgba(255, 255, 255, 0.03);
font-size: 200px;
font-family: "Lato Black";
}
This is not a color profile issue or something. As you can see the background color is exactly the same. And this is not a CSS rule conflict. There is something wrong with the transparency that I've maybe misunderstood.
Thanks for your help :)
Your code looks correct and I don't think you've misunderstood anything. Its going to be hard to reproduce fonts and effects/styles placed on the fonts completely perfectly when moving from a graphics tool to code. What you have is a bit close you may just want to bump up the opacity a bit. If you need your graphics to be perfect regarding opacity shades etc I recommend using SVG.
You might try the CSS opacity feature, which in theory should result in the same result as a rgba value — but who knows. I suspect that results vary from browser to OS. Can't test here. I would also opt bumping.
.a-text {
color: white;
opacity: .03;
font-size: 200px;
font-family: "Lato Black";
}
Can anyone tell me how to change the color of the selected content??
em using this css for it
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
It works good but not what I want, it change the color of selected text but the spaces/gaps are not select, spaces/gaps are select with the default blue color, any remedy for it??
Check my Blog and try to select the spaces/gaps then u know exactly whats wrong with it..
Waiting for ur help :) http://kownleg.blogspot.com
There are some areas that are highlighted in the darker blue colour, but I don't think there's much you can do about that if I'm being honest.
It actually looks like the ::selection pseudo element is supported experimentally by only a few browsers, and it doesn't look like it will be added to any others any time soon. See this link for more info
I am working on this site and encountered the following problem when i opened on IE 7.
Case I am seeing default windows colours for the links. (Blue for unvisited and purple for unvisited links) because the "Use windows Colours has been enabled". I have looked at the
LoVe HAte concept too. I am not using them.
I also tried to "Disable Changing IE’s Link Color Settings" in gpedit.msc
Still no solution
Problem I want to use my own colours for the webpages (white) which has been set in my CSS. It works fine on all other browsers. Help me to override these colours (blue and purple) with my own colour (white).
I want to fix this problem using my CSS or anything related to code
The link colour will not change anytime. It will always be white. Please help me out.
Thanks a lot
It's simple. IE doesn't understand inherit property.
And we have two variants
1.
IE hack to maintain inherit
color: inherit;
//color: expression(this.parentNode.currentStyle['color']);
2.
to change
a {
text-decoration:none;
color:inherit;
}
a:hover {
cursor:pointer;
}
to
a {
text-decoration:none;
color:#fff; // any color
}
a:hover {
cursor:pointer;
color:#fff; // any color
}