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;
}
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...
This is the website:
http://loveloverun.com/test/love_run/
I checked and it works properly in chrome and firefox. The problem is that in IE9 the background image only works on the body level.
Here is my css:
body {
font-family : Open Sans;
min-height: 0px;
background: url("../img/front/bg.png") repeat;
height:auto;
}
And the other div e.g. container
.container {
width: 1022px !important; /*1302px*/
background-color:#ffffff;
background-clip:content-box;
}
and one more example (footer):
#enquiry {
color:#ffffff;
background: url("../img/front/black.png") repeat;
}
I checked the doc type and it's not missing any tag.
And also some other places are different from the chrome / firefox one, so I wonder:
1) Are there any plugin to enhance the compatibility? I tried modernizer, but it seems to have no effect.
2) How can background problem be solved for IE9?
Update:
body {
font-family : Open Sans;
min-height: 0px;
background-image: url("../img/front/bg.png");
background-repeat: repeat;
height:auto;
}
still the same result
Update 2:
Screen cap in ie9
Use
background-image: url(/image.whatever);
instead of the
background: url (); code
I'm using SVG files as backgrounds for my HTML elements. It works fine in all major browsers. The problem is my site needs to also work and look correctly in Internet Explorer 9. In IE9 the SVG backgrounds are always "moved" to the right and cut, like below:
The element above is a close link of a modal. Structure and styles of the close link:
HTML
CSS
.aq-modal-close {
display: block;
width: 12px;
height: 12px;
background: url('../img/modal_close.svg') no-repeat 0 0 scroll;
background-size: 12px 12px;
float: right;
margin-top: 5px;
}
The SVG file is bigger than it should, so I use background-size to adjust it. Other SVGs are used the same way. Any ideas what might be wrong? Again, this happens only in IE9.
You can add a background-position with negative values:
DEMO
.close {
display: block;
width: 52px;
height: 52px;
background: url('image.svg') no-repeat 0 0 scroll;
background-size: 52px;
background-position: -10px 0px;
border: 1px solid black;
}
As #zeidanbm stated in the comment above, the answer to the problem was in an old post: Background-size with SVG squished in IE9-10.
Basically, the designer followed the instructions and the SVGs are displayed correctly now in IE9, as background images.
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"