Similar to this question (solution is useless): Chrome 1px line bug
My code: https://jsfiddle.net/91gryhdu/2/ (parent has blue border, red background. Child has no border and black background)
You shouldn't be able see any red, but in chrome, red edges appear if the blue border exists. Depending on the zoom level, there will either be 0, 2, or 4 red lines. Never 1 or 3.
On my computer, default zoom (100%) looks like this:
If I zoom > 100%:
If I zoom < 100%:
This is what it should look like regardless of zoom. Firefox shows no red, no matter the zoom level.
My code has the class circle and commented out border-radius because I ran into this issue while trying to create the below circles with only CSS. Its easier to see the issue with boxes.
I have tried relative vs absolute positioning, different display settings, defining all margins, em/px/%, paddings, etc. Nothing affects it. This leads me to believe its a CSS bug. The "solutions" I have found online, only fix the visual aspect.
The desired circles are very small and the white dot in the center becomes noticeably off-center in chrome. Its just enough to not look quite right.
How can I work around this issue without images/svg? I just need a little white circle inside a colored circle with a border. The connecting lines and the flattened tops don't matter. What matters is that the white dot is centered at the atomic level.
I have found that I can add a margin to the other two edges to counter the unwanted margins. In theory I could use JS to detect zoom and apply the CSS. Seems like a desperate/unreliable solution.
I'm going in circles trying to figure this out...
You could do this easily with flexbox, like so:
.outer-circle {
display: flex;
align-items: center;
justify-content: center;
width: .6rem;
height: .6rem;
padding: .4rem;
background: blue;
border-radius: 50%;
}
.inner-dot {
background: white;
height: 100%;
width: 100%;
border-radius: 50%;
}
<div class="outer-circle">
<div class="inner-dot"></div>
</div>
The Chrome bug could be due to the size units of your elements, they are small and your px values may not divide well by 4 which correspond to high resolution displays on e.g. retina Macs etc. If your pixels can't be divided by 4 without creating a floating point value, you may get unwanted artifacts like this and centered elements may be a pixel off the dead center as the algorithm has to decide where to put the color (it cannot put color halfway between pixels).
It is due to Chrome bug (https://groups.google.com/a/chromium.org/g/paint-dev/c/ERXM1sHcpyQ)
I had a same problem in Chrome vesrion 108.0.5359.125, now I have updated to the latest (109.0.5414.120) and gap has dissapeared.
(I know this is not a solution as you can't force your users to update, but hopefully this issue will become outdated in a time)
Related
TLDR: same lines drawn with the div element look different at different scales and sizes of the browser window. This is the example: imgur, jsfiddle.
I drew some horizontal, vertical and diagonal lines using DIV blocks. With different browser window sizes, different scales, different content above and below the drawn blocks, these blocks (with the same thickness) look different (some are thinner, others are wider). Conversely, blocks with different thicknesses may look the same in some moments.
These pictures demonstate how a part of my schema looks in different situations.
On a monitor with a normal pixel density and with system scale = 100% this problem is less noticeable or not showing itself at all.
I saw a similar problem earlier when I added narrow (1-2px) div elements as horizontal dividers. Some of them sometimes were disappeared (they were invisible) when others behaved as usual on the same page, if all of them were visible, some of them were thicker than others. This behavior for each element changes even I open/close Chrome developer tools panel or drag a corner of browser window.
I tried to replace div lines with svg elements, but they also demonstate strange behavior.
Can I make all elements resize the same? I would not want to replace each such element with a bitmap image.
A similar problem was described in this (not solved) question (if you can't see the problem, just zoom the result window in jsfiddle.
I cant catch the problem in other sites, for example, on Wikipedia, all horizontal lines (under h2 elements, left menu dividers) look the same at any scale. At stackoverflow there are comment horizontal dividers (narrow gray lines between comments), they are also look great.
This (imgur, jsfiddle) minimal examlpe demonstrates the different line scaling at 90, 100 and 110%. I noticed a strange feature. If I use a border to draw lines instead of the background-color, then these lines look much better. This method used at stackoverflow and wikipedia sites (Wiki also uses png at the left menu).
This is the minimal reproducible example, built in Stack Snippets:
.line {
background-color: pink;
/* border-bottom: 1px solid pink; */
margin: 20px auto;
width: 80%;
height: 1px;
}
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
This is just how different browsers solve for fractions at different zoom sizes. You can't have part of a pixel on your screen.
For example, let's say you have three divs stacked on top of each other, each 2px high. Zoom in to 120% and each div would now be 2.2px high. Since the browser can't actually render that, it might round the first div to 2px high. The second div might have a top of 2px and also be 2px high.
However, the third div should technically be 4.4px from the top, but its bottom should be 6.6px from the top. If the browser is rounding to the nearest whole number, you could see how it might compute the top of the third div at 4px and the bottom at 7px, giving it a height of 3px, instead of 2px.
I'm not saying that's exactly what's going on - each browser uses slightly different calculations when it comes to painting - but hopefully that helps illustrate the point. It sounds like you're having better luck with border so that might be your best approach.
Here's a similar question
Sorry about the confusing title but this bug is just strange.
I am working on some buttons and noticed that if my button has a border + border radius + overlay ( used for gradients ) on specific font size Chrome is displaying 2 px right border instead of 1 .
Here is fiddle
http://jsfiddle.net/3x73q9md/
I am not sure if my overlay container is inheriting something but I cant find the fix except changing the font size.
Also tried
font:0/0 a;
on overlay container and all sorts of CSS hacks but this just makes no sense.
The button is relative and overlay absolute stretched in all directions.
Can someone please explain what this is.
Please note that I am not asking to add/remove/modify current html structure. Just need to understand why this is happening and possible solution for it.
change .overlay class border-radius: inherit; to border-radius:0;
.overlay {border-radius:0;}
Demo:http://jsfiddle.net/3x73q9md/1/
I have a bar at the bottom of the website for certain content. The problem is that it's currently not extending (width) to cover the entire screen despite the code to do so.
HTML is rather basic
<div class="bottom-ulity">
other content goes here
</div>
CSS:
.bottom-ulity {
height : 57px;
width : 100%;
right : 0;
position : fixed;
bottom : 0;
background : url('../images/inner-show-text.png') repeat-x left top;
z-index : 1000;
}
I have tried giving a min-width: 100%, tried adding the 2046px as min-width. I looked at some other pages and saw recommendations with "background-size: 100%" and "background-size: cover". Both of these lines of code give the same result, it makes the image itself extend properly however it loses all its effects such as the gradient and instead gives me a basic gray color.
I tried deleting all the divs inside to see if the code inside was causing this, but that wasn't the case either. When I added "background-repeat: no-repeat;", I noticed that the image would only show up once and it wasn't extending at all, leaving a massive gaping hole on where the bar is supposed to be (zoomed out far enough obviously).
Here's an image showing the issue:
I found a hack for the problem, at least one that will be good enough temporarily. I decided to add background-size: 100%
to the css which seemed to fix the problem until I started to zoom in. While the image itself was one and extended 100% in width as it should have, it would start to move up the screen despite being a fixed position with bottom and right set at 0. What I decided was to add
background-size: 200%;
This fixed the issue though that border that is part of the image obviously is twice as big at the moment, which means while it works perfectly, the border being twice as thick it doesn't quite as elegant.
UPDATE: A fix to that solution is simply lowering the px that will be duplicated if the img allows in half. Since the background-size is at 200%, it means everything is multiplied. So if you have a different % to fix a similar issue, keep in mind how many pixels you had before making changes.
Google Chrome is acting buggy using border-radius, background color, and top and bottom borders. Here's the evidence and code to reproduce:
http://jsfiddle.net/6ADtd/4/
<div></div>
div {
background:blue;
border-top:10px solid red;
border-bottom:10px solid red;
border-radius:20px 20px 0 0;
height:100px;
/*
border-right:1px solid transparent;
*/
}
The border-right:1px solid transparent; is a trick suggested in the comments which did help remove the unwanted middle solid bar, but when you resize the window/browser - it appears again. It has something to do with the proximity of the element to the edge of the browser window, I can't quite understand it. You have to resize then hover over the element sometimes.
Videos from my desktop:
http://www.screenr.com/6wU8 (without border-right)
http://www.screenr.com/NVU8 (with border-right)
I've tried -webkit- prefixes on several properties and was unable to fix it.
I first posted this because I needed a quick fix for a specific website, but now I'm noticing it show up on several sites and I've nailed down what causes it. That's what I get for not testing in anything but Firefox. This is probably a bug and I should report it, but I'm still stuck in need of a fix in the meantime.
The ideal solution is with CSS, so I can write one or two selectors in the CSS file for the fix instead of digging through loads template files and in the database to apply div-wrap or other markup fixes. Does anyone know any tricks to get rid of this bug?
At the time of me looking into this question, there was still an issue on the prod website visible when the browser is resized to force horizontal scrolling on the document:
The "solution" I used was to apply both
border-left:1px solid transparent;
border-right:1px solid transparent;
to #header with developer tools - this seems to force the issue to go away regardless of resizing, at least on a Mac Chrome 18.
This seems like buggy behaviour to me - I'd speculate it would have something to do with blending corners where colors intersect, which, because of a bug, end up bleeding into the element itself.
I've attempted to, rather fruitlessly, look into the possible connection between a border radius higher than the border width causing this behaviour. This was, of course, untrue - playing around with different x-/y-radii yielded no results without having the "solution" from the above applied. Good to know I guess.
Sorry I was being a bit lazy with my initial reply.
What about wrapping a div with the border properties around the header with overflow hidden: http://jsfiddle.net/jugularkill/Jsdcz/
I've never seen such behaviour in Chrome, very buggy indeed.
Anyway, you can get rid of border-bottom and it will work alright. If possible, just add a <div> with background red at the bottom. Something like this:
http://jsfiddle.net/6ADtd/5/
Or a CSS only solution, add content after your div:
http://jsfiddle.net/Cthulhu/6ADtd/6/
I have a div with background image which contains 3 colors of the same icon
I shift the icon (background-position: top/center/bottom) according to what page is user viewing:
All works fine utill I zoom the page (ctrl + mousewheel) - than the background image seems to shift one pixel up or something, so i can see one-pixel line of the other icon at the bottom of my wrapper div:
Screens are from IE but it looks even more broken on iPad...
Any thoughts about what is causing this and how to fix it?
You can prevent any of the other images inside the sprite from showing by using diagonal sprites, or simply leaving some space between each image.
I shift the icon (background-position: top/center/bottom)
Use should use explicit px offsets instead. I suspect that will be slightly more robust when it comes to zooming.
There's nothing you can really do to prevent things sometimes being "1px off" when you zoom.
For example, if you have a 42px high element, and you zoom to 125%, then you have a 52.5px high element. The browser must round that number one way or the other.
Since those images are bitmaps, they always gonna look bad wen you zoom them.
You can do tree things:
Use a library like raphael JS and inlude your icons as vectors: http://raphaeljs.com/
Wrap your icons into spans for example and using a PX size and not EM's.
Leave more speace between your sprites
Try to make better resolution image and try it again.
It's better practice (and ultimately gives you much better control) to use pixel positioning rather than top/center/bottom when implementing CSS sprites, that way the image you want to show can be slightly larger (or with a little spacing) and therefore support that visual overflow you're seeing when you zoom. Your other images/states won't be affected by the neighbouring image/state because you're setting their position with a pixel-specific location rather than top/center/bottom e.g. (from article link below)
#panel-a {
background: transparent url(sprite.jpg) 0 -200px no-repeat;
}
#panel-b {
background: transparent url(sprite.jpg) -96px -200px no-repeat;
}
#panel-c {
background: transparent url(sprite.jpg) -172px -200px no-repeat;
}
#panel-d {
background: transparent url(sprite.jpg) -283px -200px no-repeat;
}
Not to mention that pixel positioning allows you to add additional states to your image without affecting other existing states if you add them onto the bottom of your image, for example. Of course that changes when you start adding images horizontally.
Here's a good reference: http://www.alistapart.com/articles/sprites