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?
Related
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.
I've encountered a really strange bug that exists in Chrome only. I've got a list of links with the equivalent of a 1px border-bottom (I'm using Compass Vertical Rhythm to output borders). In the inspector, it says that the border width is 1px, but the border displayed is more like 2px and lighter than the font colour (see image).
If I reduce the height of the window (either by making the browser shorter or opening the inspector) the border goes back to what it should be. I've tried setting the border-width manually as 1px rather than relying on Compass Vertical Rhythm to no avail, so I think it's more of an issue with Chrome.
Here is the code
a {
#include trailing-border(1px, 0);
}
And here is the output in Styles
border-bottom-width: 0.05556em;
Here is the output in Computed
border-bottom-width: 1px;
Has anyone encountered this before? Any solutions?
Apologies for the necro post. But this is the closest post I can find to the problem I am experiencing so thought I would add it here. I am confident this is a bug with chrome though I don't know enough about the border collapse bug that chrome has to be certain that that specifically is the issue..
https://www.ablueman.co.uk/the/testbench/divt.php
Shows correctly in Ie and firefox (see div table widths / heights at the bottom of the page)
But in chrome it seems to screw up the border sizes which adds a less than one pixel value.
i.e. DIV (Width:518.3333332538605px, Height: 22.33333325386048px)
If you turn off the borders, issue disapears.
I've setup a page of circular buttons.
When the mouse hovers over them individually, they rotate to show the reverse of the button.
It's loosely based on this demo from CoDrops http://tympanus.net/Tutorials/CircleHoverEffects/index4.html
My problem, is that when the mouse hovers over a certain button, I want to reveal the reverse of multiple buttons on the page at the same time (i.e. to flip them).
This works fine in Firefox and mostly OK in Chrome where it not for the buttons becoming clipped at the edges.
Here is the demo site:
http://www.qars.co.uk/spumma/v2/
This is how it looks in Chrome when you hover over the middle image: http://cl.ly/image/1K0y1y0t1z2j
Again, works great in FireFox, I just can't see where Im going wrong with Chrome.
On your .fakeit CSS rule,
add box-shadow: 0 1px 15px rgba(0,0,0,0.1);
seems like the issue is with
-webkit-perspective: 800px;
on .ch-info-wrap
Not sure what it does but it seems removing makes it work.
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've been searching for information on this, and I see a lot of similar problems (percentage widths calculation problems, padding problems, floats in opposite directions, Safari+Chrome problems, etc), but nothing I've tried seems to fix this one.
I have a mystery 1px vertical space between my content area and my navbar for part of the page heightwise in Safari, Opera, and Chrome. It works fine on FFand IE with no space.
This is the page:
http://the-polyglot.net/uploads/problem_site/
I really apologize for the inefficient, redundant, unorganized messy stylesheet that I've yet to clean up--I just picked up this site again after it lying dormant several years and I was just about to go through and clean up before I discovered this problem.
The most relevant selectors are #right_navbar, #reg_content (the text area), and #main_content (the container). The space seems to coincide with the area governed by #main_content if you check Opera's inspector, but I don't know why. I can fix the issue in Opera/Safari/Chrome by applying padding-left: 1px; to #right_navbar... but then that breaks the entire layout in every other browser.
I'd be grateful for any help. Thanks.
Remove the background-color for the id #main_content
#main_content {
min-height: 630px;
/*background-color: #D1EBF8;*/
}