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.
Related
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
I'd like to give broken/errored images some extra CSS:
img:error {
max-width: 20px;
max-height: 20px;
}
but that doesn't work. Is there a way with pure CSS to do this? Is there an img pseudo selector for this? Or even better: a dirty hack that works?
I've looked around, but nobody seems to be wondering =)
(Yes, I know JS can do it and I know how; no need to mention it.)
There is no way in CSS specs or drafts, but Firefox has a proprietary selector (pseudo-class) :-moz-broken. Its documentation is very concise and it says “intended for use mainly by theme developers”, but it can be used e.g. as follows:
:-moz-broken { outline: solid red }
:-moz-broken:after { content: " (broken image)" }
Although the documentation says that it “matches elements representing broken image links”, it actually matches broken images (an img element where the src attribute does not refer to an image), whether they are links or not. Presumably, “links” really means “references” here.
CSS 2.1 says: “This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” But Selectors Level 3 (CSS3 Selectors) just says about them: “They are explained in CSS 2.1.” In practice, browsers handle them differently. Oddly enough, Firefox supports :-moz-broken:after but ignores :-moz-broken:before. It does not support either of these pseudo-elements for normal images, but img:after, too, is supported for a broken image (i.e., the specified content appears after the alt attribute value).
For this, you should use the alt attribute, wich shows up if link is broken and you can as well style background of image :
example:
img {
display:inline-block;
vertical-align:top;
min-height:50px;
min-width:300px;
line-height:50px;
text-align:center;
background:
linear-gradient(to bottom,
blue,
orange,
green);
font-size:2em;
box-shadow:inset 0 0 0 3px;
}
These style will be hidden when image is shown.
http://codepen.io/anon/pen/Kxipq
As you can see, we do not check for broken links, but offer alternative , usefull for blind people , searchengines, whatever , and some extra styles finishes it :)
some extra Image alt attribute best practices
<img src="not_found_image.png" onerror='this.style.display = "none"' />
from:
https://www.geeksforgeeks.org/how-to-hide-image-not-found-icon-when-source-image-is-not-found/
NO there is no :error pseudo class. This is a good site for a comprehensive list of what is available:
http://reference.sitepoint.com/css/css3psuedoclasses
July, 2015 EDIT/ADDITION:
(Thank you Rudie)
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
No. There is nothing in CSS selectors level 2.1 or level 3 that allows targeting an image like that.
This is close:
<style>
img[data-broken="true"] {
visibility: hidden;
}
</style>
<img src="none.webp" onerror="this.setAttribute('data-broken', 'true')">
Strictly speaking, it sill uses JavaScript. But the JS is self contained in the image HTML code.
I would appreciate the thoughts of any javascript / css ninjas on how I can customise:
https://github.com/jdbartlett/loupe/blob/master/jquery.loupe.js
To have a circular zoom area instead of rectangular one? There is an option to set a css class for the loupe.
Please note that this is a question about the library linked above. I have already googled for other libraries. I want to keep the js as small as possible.
I guess the easiest way to do this is to use CSS3 border-radius, which is supported by the modern versions of all web-browsers (no IE lower than version 9).
If you have this in your javascript
$('selector').loupe({
width: 150, // width of magnifier
height: 150, // height of magnifier
loupe: 'loupe' // css class for magnifier
});
Just put this in your css:
.loupe {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
... and all old versions of IE will just show a square, which is maybe OK in your case?
From the developer of loupe.js:
you may want to look at chris iufer's loupe, which is only a bit
bigger than mine and includes a few samples that use css3 to achieve a
round loupe:
http://chrisiufer.com/loupe/sample.html
whereas mine uses an absolutely positioned image within a div, his
uses background-image on the div and background-position to move the
image, so css3 border-radius works.
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.
I'm trying to use animate() to change the height and opacity of a div. The div has an image background in CSS. It works fine on Firefox and Safari, but when I test it in IE the background is being removed. This is my code:
if (jQuery.support.opacity) {
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
} else {
jQuery('#list_box').animate({filter: 'alpha(opacity=100)',height: '300px',top: newTop},{duration: 300});
}
How can I fix this problem?
I was under the impression that jQuery did the whole opacity support thing for you.
Does this work for all browsers?
$('#list_box').animate({opacity: '1',height: '300px',top: newTop},{duration: 300});
You do not need to write a special handler for IE, jQuery does it all for you behind the scenes:
jQuery('#list_box').animate({opacity: '1',height: '300px',top: newTop}, 300);
HOWEVER: If you have a 24-bit transparent PNG as your background image that is disappearing, you need to be aware that you cannot combine filter: alpha (which jQuery correctly uses behind the scenes in IE) with a 24-bit transparent PNG in IE7 or IE8. I believe the only way around it is to set a background color (other than transparent) on the object on which you are using filter: alpha
How to test: Simply set a background color on #list_box to a solid color by adding something like this to your CSS after your background-image declaration:
#list_box { background-color: red }
If the background image remains, and your #list_box animates correctly (except for the hideous background) you know what the problem is and will have to find another way to accomplish what you want.
I've been having the same problem. I stumbled into the answer, when I set the opacity to 40%:
$('#list_box').stop().animate({opacity: '.4'},"slow");
I noticed that made the opacity jump to 100%, then animate down to 40%. Eureka.
So, now I explicitly set the opacity to zero before the animation:
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow");
That animates smoothly, except the text still looks horrible in IE.
To clean up the text, I removed the opacity from the css in IE after the animation. This seems to clear up the text quite a bit in IE6 and IE8.
$('#list_box').css({opacity:0}).stop().animate({opacity: '1'},"slow",function(){
//remove the opacity in IE
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$('#list_box').css({opacity:''});
}
});
});
I'm testing it on a Mac in Parallels, in IE6 and IE8. Everything seems to work fine on the Mac side.
Very (very) late with the answer, but as this is at the top of Google when I looked for help with a jquery v animate issue in IE8 I thought i'd post it here.
My problem was connected to the hasLayout bug in IE, and adding "display: inline-block" to the element to be faded fixed the problem.
I had the same sort of issue with this:
$('#nav li').hover(function() {
$(this).stop().animate({opacity: '0.4'}, 'slow');
},
function() {
$(this).stop().animate({opacity: '1'}, 'slow');
});
I simply added float:left; to the #nav li css and it fixed the issue.
In jQuery, once the div is set to have either opacity:0 (in Standards Compliant Browsers) or filter:alpha(opacity=0) in IE, you can just use $('#div').animate({opacity:1},100); Since jQuery supports cross-browser support, if you end up animating the filter via IE, then chances are jQuery is trying to support IE and the conflict comes when jQuery fires the opacity change x2.
I hope this helps. I have had the same issue, plus odd issues with IE not being able to handle fading on a div stack with multiple items in it.
I noticed the problem was caused by position:relative of the container. If "switching" to absolute opacity animation will work.
I´ve had the same problem with the IE 7,
the problem was a trailing comma after the opacity property
jQuery(this).animate({opacity:1.00,},800);
It has to be:
jQuery(this).animate({opacity:1.00},800);
I found a solution that worked for me: position:inline-block;
This works for fading text opacity, I haven't tried it with a CSS background image. Maybe it helps anyway.
I just wanted to report a small bug with fadeTo method in Internet Explorer 8. It won't work if your element as "display" set to "inline". I found that you need to put it to "inline-block" and then it works perfectly. There is nothing about this on the web and it's not the first time I have this problem.
Don't know if it's the right way to report this issue, but i'm sure someone will read this post :)
found at http://www.devcomments.com/IE-8-fadeTo-problem-with-inline-elements-to65024.htm
I solved it with adding an opaque background to the animated element:
CSS:
.overlay {
position: absolute;
top: 0;
left: 0;
width: 195px;
height: 274px;
cursor: pointer;
background: #fff url('../images/common/image_hover.png') 0 0 no-repeat; /* the solution */
opacity: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE8 */
filter: alpha(opacity=0); /* IE6-7 */
zoom: 1;
}
JS:
$('.overlay').hover(
function(){
$(this).animate({'opacity': 0.7}, 300);
},
function(){
$(this).animate({'opacity': 0}, 250);
}
);
Works for IE7-8
Hope this will help someone ;)
You can use fadeTo to accomplish what you want to do:
$('#list_box').fadeTo("slow", 0.33);
fadeIn and fadeOut do transitions from 0 to 100%, but the above will allow you to fade to an arbitrary opacity.
(http://docs.jquery.com/Effects/fadeTo#speedopacitycallback)
Same problem with IE8. Adding "display: inline-block" to .hover2 in fixed the problem.
$(function() {
$(".hover1").css("opacity","1.0"); // Default set opacity to 1.0
// On Mouse over
$(".hover1").hover(
function () {
// SET OPACITY TO 15%
$("span.hover2").stop().animate({opacity: 0.15}, 1200);
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 100%
$("span.hover2").stop().animate({opacity: 1.0}, 1200);
}
);
}
);
Ok this might help a little bit, I found a solution in this site about the exact problem http://blog.bmn.name/2008/03/jquery-fadeinfadeout-ie-cleartype-glitch/
in conclusion, the general problem is the opacity filter on IE, in your specific case there is not much you can do, thought
but in case you fade in and out, the prevent the problem with a png background image you just have to remove the filter attribute the jQuery function added whe the fx ends. Just use a callback function, something like that would do it:
$('#node').fadeOut('slow', function() {<br/>
this.style.removeAttribute('filter');<br/>
});
in case you selectors returns more than one, use the each function, something like this:
$('.nodes').fadeIn('fast',
function() {
$(this).each (
function(idx,el) {
el.style.removeAttribute('filter');
}
);
}
);
Do you use some pngfix script ? that may be the culprit.