When using border-radius on an element with background image in Edge the image becomes blurred. Here is the exact same fiddle in Chrome (left column) and Edge (right).
I've also notices that the browser width plays a role in the amount of blur the image gets. When I resized the browser by a few pixels I got even more blur. Edge (left) vs Chrome (right)
Even though the blur is only slight it becoms even more visible on when the image has lower quality. Chrome (left) vs Edge (right)
Is there any way to prevent the image from being blurred?
div:first-child{
border-radius: 10px;
}
div{
box-sizing: border-box;
background-image: url('https://puu.sh/sEUpF/c8fa8f198b.png');
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
border: 1px solid red;
width: 30px;
height: 30px;
background-color: #fff;
}
div + div{
margin-top: 10px;
}
<div>
</div>
<div>
</div>
I notice that your png source image has dimensions of 24x24px but is being displayed by the browser at 15x18px. I'd take a punt that the browsers in-built image rendering is causing the blur as it attempts to scale the image down to fit the new scale and Edge can't compete with Chrome in this respect.
Try altering your background-image to the exact display dimensions and see if you still get blurring then.
Edit
This seems to be an Edge issue with border-radius. A nice suggestion would be to use CSS' Image-rendering property but that doesn't work for Edge (https://css-tricks.com/almanac/properties/i/image-rendering/).
I'd work around it by creating an :after pseudo element to house your icon image and position that inside your container element. Because in a container without border-radius you aren't seeing the unwanted blur
Related
HTML:
<div>
<button class="my-btn"></button>
</div>
CSS:
.my-btn {
display: inline-block;
height: 19.6px;
width: 19.6px;
border: none;
border-radius: 5px;
background: url(https://www.svgrepo.com/show/21045/delete-button.svg) center no-repeat, #f99d1d;
background-size: 70%;
}
So, I set an svg as a button background. I want this image to be centered, but the problem is that when the page is zoomed, the background image sometimes shifts ~1px to the left or right. It's like on certain zoom levels browser engine can't make the image be surrounded by equal number of pixels from both sides, and instead of:
|----5.5px---- background-image ----5.5px (or 5.4px)----|
it outputs:
|----6px---- background-image ----5px----|
The same happens with vertical axis.
Why does it work like that and how can I make my background image be centered at any zoom level?
Codepen of the example: https://codepen.io/recursion1/pen/JjZPbxO
Screenshot of what I mean by lateral shifting
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
I have a background image with a square which has the same size as a div that is covering this square. (There is a god reason for this not mentioned here). When centering this background image and the div, they do not overlap on certain browser width's. When re-sizing the browser, sometimes the background square is misaligned by 1 pixel. As you can see in the example below and in the JSFiddle, 1 pixel of the background square is visible sometimes when dragging the width of the browser.
Is there a solution for this? Why is the positioning between the elements not synced?
Try to re-size the fiddle-view-port width and you will see that the cyan background-square sometimes is visible when the misalignment occur.
JSFiddle: http://jsfiddle.net/jj3qxL3k/
Code:
<div>CONTENT DIV</div>
CSS
div{
background-color: yellow;
width: 800px;
margin: 0 auto;
}
html{
background: url(http://s29.postimg.org/42cuy8m7b/tester.png) center center repeat;
margin: 0;
padding: 0;
}
body{
margin: 0;
padding: 0;
}
Tried this without any luck:
/* Fix form centering background input chrome */
#media screen and (-webkit-min-device-pixel-ratio:0) {
html {
margin-left: 1px;
}
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
body {
background-position: 50.001% 0;
}
}
By the way... This happens for me in Chrome Version 43.0.2357.81 m.
This depends on how the browser handles uneven values and aligns backgrounds and content.
This happens when your container has an odd width value since your element inside the container has an even width value. For example if your element is 800px wide and the container is 855px wide then there would be 855-800 = 55px of space left around your element and now the browser has to divide that for the two sides. It would come down to 22.5 pixels per side but since it can't paint half a pixel it has to round the number. So one side of the element would get 23px and the other side 22px.
Now it could be argued that the background image itself is treated the same way so the alignment should be the same, but in fact this is solely up to how the browser is built so that's why you are getting different results in different browsers.
It's rather hard to suggest a workaround without seeing the actual project since it would probably have to be a different solution all together.
I have a page that sizes fonts dynamically depending on the width of the document.
This results in heights that are not pixel perfect, but the browsers round them up.
In Internet Explorer there's a problem.
Normally, a background image starts from the edge of its element, the same pixel as the edge after it's top offset is rounded to pixels, but when border-radius is applied, the background starts from where the edge of the element would be if the top offset would not have been rounded, so the image may be blurry.
HTML
<div class="FIRST"></div>
<div class="SECOND"></div>
JS
document.body.onresize = function () {
document.body.style.fontSize = document.body.clientWidth / 100 + 'em';
}
CSS
.FIRST {
width: 200px;
height: 1em;
background-color: #000;
}
.SECOND {
width: 200px;
height: 21px;
margin-top: 10px;
background-image: url('data:image/gif;base64,R0lGODlhAQACAIAAAP////8AACH5BAAAAAAALAAAAAABAAIAAAICDAoAOw==');
border-radius: 10px; /* if this is removed the background works as expected */
}
http://jsfiddle.net/u8Bu8
How do I make it not blur the background?
I'd like a CSS solution using the same HTML.
That base64 GIF is just 1px wide and 2px high, top pixel red and bottom white.
Screenshot
Both sides from IE, magnified by two.
The left side is what is expected, but depending on the width of the window sometimes you get what you see on the right side.
I am not sure I recreate your blurring situation. Here is a side by side with IE & Chrome. I tried to get them to zoom in the same, but they are a little off from each other. But honestly IE looks better than Chrome.
http://chrislovestuff.blob.core.windows.net/img/css-bkg-border-radius.png
.cornerBox {
background: url(../img/main-part.png) repeat-x top left ;
width: 400px;
height:100px;
border-radius: 80px;
padding: 0 0;
behavior: url(PIE/PIE.htc);
}
In IE8 between background images parts is spacing 1px, how to remove this space, image width is 28px I want repeat-x
I had created a jsfiddle example with your code, but used some other image. Tested it in IE8 and found there is no issues.
So I believe the problem may be with your main-part.png. The image may have a white border or something. Double check your image.
EDIT:
No issues with your image also. CLICK ctrl+0 on IE to make sure you are viewing in 100%
I had similar problem with two divs with background images next to each other. I solved it by assigning:
background-size: cover
Which stretched your image to cover the entire div