I have a setup like this:
https://codepen.io/anon/pen/JrrVrV
On Chrome at various display resolutions or zooms (ctrl+ / ctrl-),
there'll appear a 1px space between #two's border and #three, showing the red background of #two
The 1px space will either appear in all 4 sides, top+bottom, or left+right.
I've toyed around with this for a few hours now and the only thing that'll completely eliminate this behavior is removing box-sizing: border-box which unfortunately will break a lot of things.
Think this is a Chrome-only issue as I've yet to be able to replicate it in Firefox or Opera.
Any idea what's causing it?
I am trying add thin borders to a div. My CSS is like this:
border: solid;
border-width: 1px;
Yet the result borders don't look equally thin in my browser. As you can see below, the borders on the left and bottom look thicker than the borders on the right and top.
I want to make the borders equally thin. I have tried to add
shape-rendering: crispEdges;
But it doesn't change the look. JS Fiddle example here.
I tried this in my Chrome Version 41.0.2272.101 m -- it looks bad. I've also tried this in IE -- it looks fine. So I know it's not my monitor...
Your monitor is set to a non-native resolution. (Windows 8) Right click on your desktop, click "Screen Resolution" and then select the recommended resolution.
I have same problem.
After some research I found out it's caused by 1.5 device pixel ratio (Windows 8.1 set scale everything to 150%).
Solution is to set sale to 100% but it makes texts supertiny so I can't use this solution.
Both IE(11) and Chrome are affected. Firefox is OK.
Same issue is goes for mobile phones and tablets:
mobile safari rendering buttons with border
Uneven border in mobile browsers
You likely have other elements to the left and below the box and may be accidentally applying borders to them as well to make it appear that they have "double" borders.
Make sure you isolate the box and try again.
A 1px border can't be uneven like you are displaying.
if someone could help on the following would appreciate this as I spent the whole evening without result on this issue.
I have a site where I want to modify tags appearance after every article.
The problem is that firefox (version 14.0.1) provides smaller height for the text (total <a> height is 15px icnluding 1px bottom padding), while chrome and rest browsers give height 19px. So the difference is 4px. Because of this - the "tag hole" is displayed at different levels. A little bit lower than vertical middle for FF and upper than middle for rest browsers.
I made a picture to get the problem easier:
I have general css reset, so that different browsers behave similar. But it looks like not everything is included there.
Has anyone an idea what could cause this?
Add display: inline-block; to your .tags li a
This won't affect the well-behaving browsers, but will fix FF
I am using a table to render a calendar. I have noticed an odd rendering bug in table cell border rendering in Firefox version 3.6 through 7. Here's a screen capture:
As you can see, the border gets "bent" when I scroll. Also, there are gaps between the horizontal and vertical border where it isn't "bent". A live example can be seen on this web site.
I don't see this behavior in Chrome, Safari, or Internet Explorer.
UPDATE
I am still seeing this issue in Firefox 20. I have noticed that single pixel borders do not exhibit this behavior, only two pixels or more.
You have a problem whith border-collapse:
Here is a solution for your problem: http://www.charlesgarwood.com/blog/?p=13
What to do:
change border-collapse from collapse to separate
change the border-width of the <td>s and <th>s from 2px to 1px
give the <table> itself a 1px border
Give some conditional comments like described in the link
EDIT:
We're in Chrome 19 now, and this still isn't fixed. Just a clarification: this happens in Chrome on Windows, not Linux or Mac. I think it has to do with Cleartype. Google, please fix this.
I've been using CSS3 text-shadow to emulate IE9's font smoothing on other browsers. Basically I've just set the text-shadow of a container's text to the container's background. You can see the behavior by setting text-shadow on a largish font element in anything lower than Chrome 14.0.833. The text looks smooth. Remove the text-shadow and the font looks jagged.
However, in Chrome 14.0.833 (UPDATE: appears it's also "broken" in 14.0.834) this no longer works. The text-shadow property still works, but not in the way it did before. You can see the behavior here (just load it up with diff. Chrome versions)
It seems as if in the older Chromes the text shadow began inside the text just a little and then spread out - which is perhaps why the text-shadow hack worked. In the newer Chrome, it appears the text shadow starts just outside the text, which is why it won't work. See what I mean here.
My question is basically: Is this a bug? Which is expected behavior, if either? Are there any other font smoothing workarounds I can use?
The W3C's spec didn't seem to say what the intended behavior is, though I did see that perhaps I should be using text-outline (which is kinda unsupported, which defeats the purpose)
Okay, i've spend quite a bit of time on this and this is what it comes down to: It's a bug.
First of all, -webkit-font-smoothing:antialiased; only works for Mac, not Windows.
I'm on Windows7, I've created a layered Pixlr image with screen shots of a JSfiddle I made that had 4 different elements with different text-shadow applied to each. You can clearly see that text-shadow has changed since Chrome13 and Chrome 14.0.835. I had to switch between the Beta and Dev channel a couple of times because I messed up, uninstalling etc. ugh.
Download the layered Pixlr image file I made from:
http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd
Then go to http://pixlr.com/editor/ and choose to open file from computer, open the file.
Now in Pixlr, zoom in to the four rows of text, in the layers panel on the top layer click the checkbox and uncheck it, then check it again, do it over and over and see how drastic the change to text-shadow is.
This should be submitted as a bug. A link back to this page could be used to show the effect, if needed.
JSfiddle (The JSfiddle I used in the screenshots)
http://jsfiddle.net/nicktheandroid/Xkp9q/
I put a piece of pie in the microwave an hour and a half ago.... it's cold :(
Well, I've figured it out, sorta. Annoying since I set a bounty, but whatever.
I'm fairly certain this is not a bug and it is expected behavior - especially since we've seen a few more iterations of Chrome and it's stayed the same.
A few different methods work. I wrote up a bit for my blog, you can see the full article here, but here's the bulk of it:
First, I tried the -webkit-text-stroke:1px #000 where #000 is the
color of the text. But this style is meant for use where the color of
the text is different from the stroke, for a nice text-outline. When
both are the same color, it looks...odd. I'm not sure why; I'm no
font-rendering expert. You can see the behavior in the picture after
the article.
Next I tried a simple text-shadow:#000 0 0 1px where #000 is the same
color as the text. Due to the same Chrome 14.0.833+ problem, this
still leaves the font looking somewhat jagged. It's better than just
plain text, however.
Next I tried a combined the two attempts above. This looks a little
bit better, but it bulks up the text as it essentially adds 2 pixels
to the thinkness of the text.
Lastly, I tried applying two text-shadows: text-shadow:#000 0 1px 1px,#000 0 -1px 1px > > where #000 is the color of the text. What this does is
apply two text shadows, one of which is pushed down a little and the
other pushed up. This way, the text shadow covers the jagged edges. It
bulks up the text a little but definitely smooths it out.
Depending on the size of your text, different methods work. Smaller
(but still jagged) text could use the text-shadow, larger text could
use the shadow/stroke method, and very large text could use the
dual-shadow method. Of course the larger the text the less noticeable
the extra few pixels become. You can see all the different methods
here
text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px;
OR
text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px;
Tested and works fine in different versions of Opera, Chrome, Safari & Firefox.
-webkit-font-smoothing:antialiased;
might work for you
YES! I've found a solution for this problem. It's weird, but it works for me.
So, to make it work, put this style on the element you want to smooth:
-webkit-border-bottom-left-radius: 1px;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01);
overflow: hidden;
I've put up a sample HTML file with just this style so you can quickly test it.
This was indeed how a lot of webfonts (Google Webfonts and also highly professional fonts from Typekit etc.) looked in Firefox (left) and Google Chrome (right) on Windows systems (and eventually elsewhere too). No joke! To clarify this: The only browser that completely messed up Google Webfonts was Google’s browser Chrome. How sick is that ? In 2013 Opera browser has switched it’s rendering engine to webkit (=the rending engine in Chrome), so this problem exists in Opera too.
more : http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/