I have a circular image (a profile picture). This image may or may not be translucent so I've given it a background color to ensure that it's always visible. The problem I'm having is that the background color is visible even on images that are completely opaque (see figures).
After messing around with borders and padding I found a workaround. I found that adding an invisible border, and then removing it will fix the problem. To deal with images being dynamically added and removed, I do this on a timer (this was easier than injecting some code in all places where images are added to the page). This is what I've done and it seems to work but I don't like it.
setInterval(() => {
for (const img of document.getElementsByTagName("img")) {
if (img.style.border.length) {
img.style.border = "";
} else {
img.style.border = "0 solid transparent";
}
}
}, 500);
The <img> has the width and height attributes set to 32. It also has a border-radius of 16px and of course, a background-color.
Surely there must be a better way to deal with this than the setInterval above. Changing the border seems to be causing the element to be rendered again (and correctly). Perhaps there's a way to do this more directly?
Since this is a weird rendering issue, I should mention that I'm using Chrome 87.
I found another workaround that's a little bit more efficient. Whenever an image is added to the page, I attached an onload listener that updates the border.
img.onload = () => {
setTimeout(() => img.style.border = "0 solid transparent", 100);
};
This still feels like an ugly hack. Also, the edge around the image appears briefly before disappearing when the page loads. I'm looking for a better way.
I tried this out in Safari and updating the border doesn't help. It seems like I'll need to think outside the box.
Figure 1 - disgusting
Figure 2 - desired
Oh neat, what an interesting issue! Unfortunately I've looked and looked and looked and can't seem to see why this is happening. Triggering a reflow of any kind seems to fix it though, so whether you use the border or not should work.
However I think I've found another solution that would work without requiring a reflow, and that's using a radial-gradient background-image instead of a solid background color.
I set up an example pen here: https://codepen.io/xhynk/pen/ZEprxqq (it was easy to increment the ?4 to uncache the image and get it to "act weird" again.
Using this CSS for the background on the image, it seems to prevent the image from being close enough to "bleed" through the edge:
img {
background-image: radial-gradient(#000 70%, transparent calc(70% + 1px));
}
You could potentially drop the 70% down to 69% if you're still seeing it. I just tried to get it as close to the edge of the container as possible, and the +1px calc smooths it out instead of being jagged.
You can see in the following image, the first avatar has the radial-gradient applied and there's no bleed, and the second has the solid background: black instead which does.
I tried to replicate what you just told. And it seems to work just fine.
From what I understood, I am thinking of one possible error that is to replace fixed width of the image and set it to 100% and not care about the height of the image in the img tag.
Set the height and width of the image in your surrounding div and give that a background color.
<!DOCTYPE html>
<html>
<head>
<style>
img {
background-color: blue;
border-radius: 50%;
width: 100%;
}
#image-container {
width: 128px;
height: 128px;
background: lightseagreen;
}
</style>
</head>
<body>
<div id="image-container">
<img src="img_avatar.png"/>
</div>
</body>
</html>
Just copy paste it into https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic to see
Related
I am learning how to do a slideshow with CSS, HTML and Javascript, everything seems to be fine but when I click on next or prev the current image gets bigger and it stays on the screen for a few seconds. I am using images with different sizes, but I added a width on CSS -> img{width:100%;}. It could be something related with the margins as well but that doesn't seem to be the problem.
Here is some code that might help you understand the problem:
figure
{
position:absolute;
opacity:0;
transition:1s opacity;
margin:0;
border-left:solid 2px black;
border-right:solid 2px black;
}
figure.show
{
opacity:1;
position:relative;
transition:1s opacity;
margin-right:15%;
margin-left:15%;
}
Also there is a space between the image and the bottom div. I am doing this on c9.io and I don't have this problem there, could it be something on codepen that is causing it?
You can check the code out here: http://codepen.io/iikinz/pen/BiLeJ
Your images are getting bigger cause you are removing the show class and the show class has the margins.
Move:
margin-right:15%;
margin-left:15%;
out of figure.show and into figure.
--UPDATE--
Here it is: http://codepen.io/anon/pen/Cuikc
--UPDATE--
This works for most of your images but a couple of them are smaller than the rest so those appear to get smaller when changing slides. The ideal solution would be to just make sure they are all the same size. Plus it will keep them looking clear since they won't have to be stretched.
About the gap under the image, it's displayed inline :
img {
display: block; /* this will fix bottom gap */
width: 100%;
}
About your images size :
Just use images of the same size will fix your situation. Otherwise try forcing them with css
figure img {width:1280px;height:960px;margin-right:15%;margin-left:15%;}
About i can i do the transition and more ... well, not to sound arsh or nothing, but .. keep studying. You are quite asking too much in a single question.
I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?
Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.
You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}
I have a background image for an input box..It works fine in IE/FF, but for some reasons it is not visible in iPad Safari..Below is the CSS for the same;
#rightContent .inputBox{
background:transparent url(images/keyback.gif) no-repeat scroll center 6px;
border:0pt none;
float:left;
height:40px;
#height:37px;
margin-left:10px;
width:450px;
overflow: hidden;
}
Please help. Thank you.
I would suggest splitting out the background style into seperate parts. Not all browsers support transparent (and possibly other parts of that style).
When a browser sees a style they don't know what to do with, they usually ignore the whole style. Putting the background-image onto it's own line (eg. it's own style) will let that property get picked up by browsers that can deal with it, rather than getting missed because it is lumped in with things the browser doesn't know about.
I believe the default value of background-color is transparent. Have you tried not setting a color? Also, since you have a set image with no-repeat, why not make the image a jpg/png and set a color to match the background-color you want.
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I am having the same problem, but I found that the image slice I was using was too thin to display on iPad. It is a texture, so I was using a 15px slice and an x-repeat, which is fine in all browsers but not iPad. After some experimenting I found that the threshold for iPad seems to be 130px.
I remember reading somewhere (a long time ago) that sprites - or at least I think that's what they were called - were better than using two images when you were trying to change an image on hover. I believe the reasoning was something to do with not having a delay. For example sometimes I'll go to a website and go to click on a link and for a split second there's no image there... it's blank... before the second one shows up. Isn't that because the second image has to load first? If that's the case wouldn't "sprites" be better?
Now which ever way is the better approach I'd like to take. Basically, I have a form button I want to change with an image... and when hovered over I want it to change.
I googled and found out doing something like <input type="image" ...> would work, but than other people were saying that's not the right way yady yady ya.
So how should I do it? Sprites or separate images? And most importantly, how can I do it?
Many thanks,
The Novice.
Yes spirits are better in terms of performance/bandwidth, you should have a look at:
CSS Sprites: Useful Technique, or Potential Nuisance?
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
Saving Bandwidth and Improving Site Speed Using CSS Sprites
Also have a look at:
CSS Sprite Generators
CSS Sprites are the way to go, else you'd have to "preload" your hover image.
Let's assume your button is 100px wide and 20px high.
Create a new 100px by 40px image, placing your "default" state image on the top, and your "hover" state image on the bottom.
Then in your HTML, create your button.
<input type="button" class="submit" />
Apply your new image as a background on the button element.
.submit {
display: inline-block;
width: 100px;
height: 20px;
border: 0;
background: url(button_bg.gif) no-repeat top;
}
Then simply change the position of the background image on the hover state.
.submit {
background-position: bottom;
}
Your hover image would have already been loaded, so there won't be any delay.
Have fun!
The site I'm working on opens with a fancy jQuery opacity animation. Currently It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.
Is there some clever javascript command i can run to refresh/update the graphics?
Any other way to fix this?
My problem is entirely css and javascript related, so all source code can be found following the link.
Thanks for any help!
http://xistence.org/dev/
After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):
$('.item').css('filter','');
This question probably has the answer you are looking for:
jquery cycle IE7 transparent png problem
from #darkoz's answer:
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
This snippet of jQuery code has served me well when dealing with opacity issues in IE.
$(function() {
if (jQuery.browser.msie)
$('img[src$=.png]').each(function() {
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
})
Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.holder-thumbs li a img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.