I'm finding a very strange problem with my jQuery mouseover caption function when viewed in Chrome - but only on Macs! My friend uses Windows 7 and all of his browsers display the js correctly and smoothly. However I've tested on numerous Macs and Chrome for Mac just can't seem to handle it!
FF and Safari work perfectly in both OS (slightly smoother in Safari).
Firstly, here's the site I'm building at the moment here. The function is the mouseover for each item in the portfolio section.
The JS:
$(document).ready(function() {
$('.item .caption').hide();
//On mouse over
$('.item').hover(function() {
//Display the caption
$(this).find('div.caption').stop(true, true).fadeIn(300);
},
//When mouse leave
function() {
//Hide the caption
$(this).find('div.caption').stop(true, true).delay(700).fadeOut(300);
});});
The CSS:
.item {
float:left;
height: 215px;
margin: 7px;
width: 225px;
position: relative;
background: #cacbce;
}
.item .caption {
background: url(images/hoverbg.png) repeat;
box-shadow:inset 0px 0px 250px #000;
-moz-box-shadow:inset 0px 0px 250px #000;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
position: absolute;
top: 0;
}
Pretty standard function, I'm sure you'll agree. Has anyone got any ideas what is going wrong?
I'm using Chrome 10.0.648.133 (up to date as of 15th March 2011). I'm starting to think it's a problem with the browser!
This has been resolved.
Chrome has difficulty with box-shadow css inside elements you're applying the JS to. Once I removed that, it worked perfectly. I'll bring this issue up on the Chrome dev forums.
Related
Hello I have been trying to fix this issue all day. With Chrome's latest release
Version 53.0.2785.116 m
The svg sprites I had been using no longer appear. They appear in their correct positions in firefox and ie with no issues.
I looked at the release notes and could find nothing mentioning SVG. I really don't know how to remedy this problem since they show on all other browsers. Does any one have any clue?
Here is the some code I'm using for reference
&.ico-nav {
width: 60px;
height: 60px;
border: 2px solid #eia_green;
border-radius: 100%;
float: left;
margin: 0 15px 15px 0;
background: url(../images/global-nav-icons.svg) no-repeat;
background-size: 1700% 1700%;
/*Sources and Uses Menu*/
&.petro {
background-position: -20px -225px;
}
&.natural {
background-position: -20px -330px;
}
&.elec {
background-position: -20px -430px;
}
&.con {
background-position: -20px -530px;
}
&.coal {
background-position: -20px -635px;
}
&.renew {
background-position: -20px -735px;
}
I also have used the symbol and defs method for calling SVG inline and that has not worked either.
I have played around with dimensions and have gotten a icon to show but not with out truncating the sprite itself which has about 80 icons in total on it.
Any help is appreciated.
EDIT-----------------------------!
This issue appears to be related to SVG and border radius. My SVGs look normal on Chrome Canary (Beta) and hopefully the change is coming down the pipeline.
Here is a chromium bug that was related to my issue so the devs at Chrome are aware!
Hope this helps anyone experiencing anything similar.
https://bugs.chromium.org/p/chromium/issues/detail?id=643623
Nobel Prize to anyone who can figure out what's causing this.
Firefox:
Internet Explorer:
Chrome:
As you may be able to see, in the Chrome one there is a gap between the Facebook icon and LinkedIn icon, while in the other browsers they look evenly spaced.
My CSS is
#social-icons-holder { text-align: right; }
#social-icons-holder > a { height: 20px; padding: 5px 10px; margin-left: 5px;}
#social-icons-holder > a:before { content: ""; }
.fb-icon { background: url(assets/Footer_FB.png) no-repeat; }
.fb-icon:hover { background-image: url(assets/Footer_FB_Hover.png); }
.li-icon { background: url(assets/Footer_LinkedIn.png) no-repeat; }
.li-icon:hover { background-image: url(assets/Footer_LinkedIn_Hover.png); }
.twitter-icon { background: url(assets/Footer_Twitter.png) no-repeat; }
.twitter-icon:hover { background-image: url(assets/Footer_Twitter_Hover.png); }
and I've verified that the images are all of the same size and have the same dimensions for the white square portions of the image.
EDIT: Strange ... just tried a fiddle http://jsfiddle.net/4dgcnc0q/1/ and it looks fine in Chrome. Also, the images are smaller on Chrome on my webpage than they are on IE, FF and on the fiddle in Chrome.
I have some problem with this (not exactly this). Well, I thing that chrome and other browsers have some Preinstalled setting, that is not same in all browsers. That might be the problem. Try: open chrome > inspect element > and find ALL styling for your images. There should be some css, that browser made. Try to change them...
Been working on a site for quite a while and almost have it done. I am now mainly dealing with an SVG issue in Safari & Chrome (webkit based browsers). When I load the SVG on the homepage there it is larger than in Firefox and IE. This causes the image (head of the hat man) to slightly be cut off or hidden as it is displayed as larger image than in Firefox for example.
Safari screenshot:
Firefox screenshot:
I found this thread on SO. There they suggested to use:
svg { max-height: 100%; }
This CSS change as it is on the site:
.hatman {
position: absolute;
bottom: 15px;
left: 50px;
right: 30%;
}
.hatman .hatman-slide {
height: 100%;
max-height:100%;/*added as suggested */
width: 100%;
}
.hatman #profile {
position:absolute;
left: 0px;
}
.hatman #hat {
opacity: 0;
}
That did however not work for me. The answer was not accepted by the OP either. Another similar issues is described at SO here, but no answer yet either. Has anyone a suggestion how to fix this?
In the end this was more an issue with Webkit dealing with the SVG resizing.
This JavaScript was used to fix the max height issue
function TSafariFix() {
jQuery(window).resize(function() {
TSafariFix_Resize();
});
TSafariFix_Resize();
}
jQuery(document).ready(function(){
Hatman = new THatman();
SFix = new TSafariFix();
});
I'm working on this site http://zap3d.com/ and I have a problem: With Internet Explorer (IE) I can't click the two links (Upload and Download) but with Chrome and Firefox I can.
Here is my CSS for Upload button
.upload_button {
position: absolute;
left: 47px;
bottom: 28px;
width: 237px;
height: 41px;
border: none;
background: transparent;
}
Thanks
Some versions of Internet Explorer may not register clicks on elements that have a transparent background, and no content within. In these cases, set your element's opacity to zero:
.upload_button {
opacity: 0;
}
You'll get the same invisible element effect, while maintaining cross-browser compatibility.
I am having a very strange problem here. I tried to create a search bar and this is how it looks in chrome, which is what i want.
It works fine in Safari, Here is all the involved CSS code.
#input {
height: 25px;
padding-left: 5px;
width: 70px;
}
#button {
margin-left: -6px;
height:27px;
position: relative;
top: -2px;
padding-left: 5px;
}
But in case of FireFox, the Button moves up a little which makes it look bad. Here is how it looks in FireFox.
This BUg in Firefox is fixed if i remove the line top: -2px; but then a similar problem crops up in Chrome and Safari.
How do i Fix this ?
You can fix with jQuery
Code
$(document).ready(function(){
if($.browser.mozilla){
$("#button").css("top", "-2px")
}
})
If you have not added jQuery add this script
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>