Spacing between 3 right-aligned images looking strange in Chrome only - html

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...

Related

Why does a large border-radius value cause chrome to hide the image?

I have a 128px image with a border-radius to make it appear rounded (I'm actually using the .is-rounded class from Bulma to do this). This is the resulting CSS on the image:
.image img.is-rounded {
border-radius: 9999px;
}
This works in Firefox but in Chrome, the image is hidden.
If I change it to the following, it works:
.image img.is-rounded {
border-radius: 63px;
}
But anything beyond 63px, the image is hidden again:
.image img.is-rounded {
border-radius: 64px;
}
You can see this on my personal website here: https://dominick.cc/
Chrome 110.0:
Firefox:
I updated Chrome to 110.0.5481.100 and it seemed to resolve it. Weird!

Custom Scrollbar shows in Chromium and Safari, but not Chrome

I have a custom scrollbar that appears in Chromium and Safari, but it will not show up in Chrome... makes no sense! Does anyone know what may be causing this?
EDIT may also be worth noting that the scrollbar USED to appear in Chrome just fine... maybe some new Chrome update broke it?
Here is a link to the site (scrollbar is at the bottom): www.missingnewyork.com/store
And here is the CSS for the scrollbar:
::-webkit-scrollbar {
height: 1%;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
}
::-webkit-scrollbar-thumb:hover {
background: #ffffff;
}
That's how it should look? (smaller maybe)
If that is the case it's probably because of the height: 1%;. CSS doesn't know very well what is the % for heights, it's better to not use it. Try to use vh of some fixed value.

CSS Sprite loading inconsistently on Chrome

I have a CSS background sprite (2x size) that's showing up inconsistently on Chrome only. When I load the page, what is supposed to be a series of flags looks like this :
Now, if I use safari or firefox, it loads correctly
How do I fix this strange issue?
.flag {
background: url("flags_2x.png") no-repeat;
display:inline-block;
background-size:18px 7800px;
width:18px;
height:18px;
}
.flag-abkhazia-12 {
width: 12px;
height: 12px;
background-position: 0 0;
}

CSS SVG sprite wrong on IE11 and Opera

I will like to get help please with an issue I got in both IE11 and Opera with CSS SVG sprite.
For some reason both of these browsers are showing the SVG in a very wrong way and some times even not at all.
Here's my code which works great on Chrome, Safari and Firefox:
.item {
width: 50px;
height: 50px;
float: left;
margin-right: 40px;
background: #eee url('1.svg') no-repeat 0 0;
}
.item.i1 {
background-position: 5% 40%;
background-size: 440%;
}
.item.i2 {
background-position: 43.3% 40%;
background-size: 417%;
}
.item.i3 {
background-position: 82.6% 40%;
background-size: 404%;
}
A live jsfiddle demo: http://jsfiddle.net/DBH29/
Am I missing something? if not and my code is fine, and there's no way to fix it, then how can I make a CSS fallback to an image (PNG) or how to detect it with Modernizr please?
possible related to: SVG in Opera using CSS background-image with scaling , in short to work with Opera 12:
"Removing the width and height attributes in the svg"

FadeIn/FadeOut strange glitch in Chrome - only on Macs!

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.