I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.
The lack of -x/-y is discussed at length here: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, and a proposed solution (background-position-y doesn't work in Firefox (via CSS)?) is to use CSS variables, which were recently introduced in Firefox.
However, it doesn't look like updating CSS variables from animation #keyframes is supported?
...
background-position: var(--bgX) var(--bgY);
...
/*Here, CSS variables don't work:*/
#keyframes move-y {
from {
--bgY: 0px;
}
to {
--bgY: -670px;
}
}
Here is a JSFiddle (note: Firefox only): http://jsfiddle.net/phoj0kq5/
I added flickering borders to the animation just to make sure it's running, but the crab doesn't snap its fingers.. Am I using CSS variables wrong, or do they simply not support animation?
Edit
Updated fiddle which actually works in Chrome (still not in Firefox): http://jsfiddle.net/phoj0kq5/1/
This is not a solution, but a workaround that should help:
Since you cannot show a part of the image dynamically when cols and rows are changing one at a time, try using only one column or row of image parts.
When only one line of sub-images is used, you should be able to set the viewed part with background-position: X 0; while X is your offset per image. You will need to edit the image file you are showing to achieve this.
So change the layout of subimages in the image file form:
☺☺☺☺
☺☺☺☺
☺☺☺☺
to:
☺☺☺☺☺☺☺☺☺☺☺☺
As i said, this is not a solution to the problem itself and rather a workaround, but it should work fine on all browsers. However, Mozilla should implement the -x/-y attributes or fix the CSS-variable issue in animations. Until then, i don't see a proper solution for this.
I feel like I should be able to find an answer on this but, alas, I'm not having much luck. I'm trying to repeat an SVG as a background using a data-uri within CSS. It works in basically every browser except it doesn't seem to be working in IE10 (and probably other IE versions). The code is pretty simple really:
.bg-test {
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNTAgMTgiPjxnIGZpbGw9IiNEMkQyRDIiPjxwYXRoIGQ9Ik0wIDE3aDUwdjFoLTUwek0wIDBoNTB2MWgtNTB6TTAgMWgxdjE2aC0xek01IDE0aDF2M2gtMXpNMTAgMTNoMXY0aC0xek0xNSAxNGgxdjNoLTF6TTIwIDEzaDF2NGgtMXpNMjUgMTRoMXYzaC0xek0zMCAxM2gxdjRoLTF6TTM1IDE0aDF2M2gtMXpNNDAgMTNoMXY0aC0xek00NSAxNGgxdjNoLTF6Ii8+PC9nPjwvc3ZnPg==);
height: 100px;
background-repeat: x-repeat;
}
Here's an example:
http://jsfiddle.net/Aaronius/C7p83/3/
It doesn't repeat in IE. Is this just a bug? Is there a decent workaround without resorting to raster images? Thanks.
I inserted a youtube embed code (the iframe code) in a webpage, and used css column-count to automatically divide text in the page to two columns.
.newspaper
{
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
The problem is when i embed youtube video after the initial viewport it is shown as black image. Here is an example: http://jsfiddle.net/KTvCV/689/. Seems this is bug with youtube and chrome. Is there any solution/fix for this issue?
Tried different things and not working so thinking to go with jQuery columnizer instead of CSS column count.
Trouble Replicating This Problem - Observations
I am seeing very inconsistent behavior with Chrome trying to display iframe embedded videos in a multi-column format.
The following did not seem to clear the problem consistently:
I tried putting <p> tags around the text thinking it might be line
length related quirk.
I tried clearing the cache.
Changing the width of the column
Changing the dimensions of the iframe
In addition, videos below the fold seem not to be rendered (painted?).
Once Case That Works
The only situation that seems to render well is having a single video that appearing in the first column.
I don't know why this is the case.
I had this problem, for me the fix was to give the <iframe> an explicit width in pixels, position: relative, z-index, and a 3d-transform such as transform: translate3d(0, 0, 0).
Experienced in Chrome 43.0.2357.130 (64-bit) for OS X Yosemite 10.10.3
For me, only adding transform: translate3d(0, 0, 0) on my <video> tag worked.
Note: I use a <video> tag, not an embedded <iframe> YouTube video. But I had the same problem with columns.
I can confirm the issue with having a YouTube video combined with column-count. http://codepen.io/djschoone/pen/VYdaOv shows what's happening. The video moves to an other position.
HTML
<html>
<body>
<article class="display-2col">
<p>Text</p>
<p><iframe src="http://www.youtube.com/embed/GUstB3VS4KY?rel=0&autoplay=0&wmode=opaque&controls=0&showinfo=0" width="614" height="370" class="video-filter video-youtube vf-gustb3vs4ky" frameborder="0"> </iframe></p>
</article>
</body>
</html>
CSS
.display-2col{
-moz-column-count:2;
-moz-column-gap:20px;
-webkit-column-count:2;
-webkit-column-gap:20px;
column-count:2;
column-gap:20px;
}
The difference with IE and FF is the video is placed with the tag on Chrome whilst the others get the tag served.
I guess it has something to do with positioning. Looking into it!
I'm looking to use SVG versions of a company logo on a website. At present, all current versions of major browsers (IE, Safari, Chrome, Firefox, Opera) support SVG, so this doesn't seem crazy. However, old browsers are still out there, so I need to fall back to PNG support.
The obvious solution is to put the SVG content in an object tag like so (forgive the inline styles...):
<object data='logo.svg' style='height:3em' >
<img src='logo.png' style='height:3em' />
</object>
Which in theory should render the object if possible, or else render the img. However, Chrome doesn't like this and applies the height style to the object itself but not the SVG, so I end up with a little iframe-like box with scrollbars, showing a huge logo.
Another solution would be to use the PNG as the img source, and then swap it out at render time with the SVG source with javascript, if I think I'm running on a SVG-capable browser. This is not ideal because the PNG will still get downloaded, and I'm not confidant I can properly detect SVG support. Unfortunately, jQuery doesn't seem to have a SVG-detect feature.
Finally, since my website is deployed with ASP.NET, I could inspect the user agent string before serving the page, and specify the img source depending on whether I think it will support SVG. But this also has the potential problem that I am not confidant I can make the right call.
What is the preferred way of doing SVG for images?
This is an old question, but here is another solution:
Download a version of Modernizr that is trimmed down to just testing SVG (assuming that’s the only test you need).
Run the test. If it passes, put in the SVG. If it fails, put in the bitmap. Essentially:
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
SVG is a perfect use case for Modernizr, because there is no simple native way to provide a fallback.
Note: The browser don't load both (png and svg) versions.
For the record: the only reason you would need a fallback for SVG these days if you have to support IE 8 and down, or older Android.
I wouldn't call it the preferred way, but if you want to pursue your second option this should detect SVG support (from Raphaël 1.5.2):
if(window.SVGAngle ||
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") {
// supports SVG
else {
// no SVG
}
Raphaël uses this to determine if it should render using VML (IE) or SVG (everyone else).
Out of curiosity, why SVG for your logo? If you already have a PNG version, this seems like a lot of work.
To solve your problem w/resizing SVGs in the object tag:
Add "preserveAspectRatio" and "viewBox" attributes to the svg tag. Open the file in a text editor and find the tag. in that tag, add the following attributes:
preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"
Replace {width} and {height} with some defaults for the viewBox. I use the values from the "width" and "height" attributes of the SVG tag. Save the SVG and it should now scale as expected.
See: How do I scale a stubborn SVG embedded with the <object> tag?
The problem w/SVGs in the object tag, though is that they swallow the clicks.
SVG as background-image w/PNG fallback: http://www.broken-links.com/2010/06/14/using-svg-in-backgrounds-with-png-fallback/
My favorite is using the img tag and an onerror handler to change the src tag to a PNG.
Another good resource: http://www.schepers.cc/svg/blendups/embedding.html
The only thing you need is CSS. First you declare the fallback image as a background-image. Then you can use multiple backgrounds to add the SVG.
IE8 and below will ignore the second background-image-declaration, because the lacking support of multiple backgrounds.
By the way, I'm using the img element here, because a logo is content, not layout. Using background-images might appear to be wrong in this context, but I disagree. You get the best of the worlds: SVG logo, fallback for
HTML:
<a href="/" class="site-logo">
<!-- base64 encoded 1x1 px big transparent gif -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="company logo">
</a>
CSS (using multiple background images):
caniuse: multiple backgrounds
PNG for IE <9, FF <3.6, Opera <10.5
SVG for all the others supporting SVG
Android 2.x won't have a PNG or SVG, due to these versions actually supporting multiple backgrounds, but not SVG
There is only one HTTP request made for browsers supporting SVG
.site-logo > img {
/* Dimensions of your image need to be set */
width: 32px;
height: 32px;
/* Fallback for <IE9 */
background-image: url(logo.png);
/* multiple backgrounds are ignored by <IE9 */
background-image: url(logo.svg), none;
}
CSS (using linear gradients):
caniuse: CSS gradients
PNG for IE <10, FF <3.6, Safari <4.0, Opera <11.1, Opera Mini, Opera Mobile <11.1
SVG for all the others supporting SVG (if vendor-prefixes are specified)
Ignoring the old gradient syntax for webkit makes Android 2.x use the PNG fallback
.site-logo > img {
/* Dimensions of your image need to be set */
width: 32px;
height: 32px;
background: transparent url(logo.png) center center no-repeat;
background-image: -webkit-linear-gradient(transparent, transparent), url(logo.svg);
background-image: linear-gradient(transparent, transparent), url(logo.svg);
}
Try svg-web they have a number of different ways of displaying svg images including flash with automatic fallback.
The best method I have found including SVG as an HTML element (with fallback) is this one:
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" style="width: 100px; height: 100px; vertical-align: top;">
<image xlink:href="image.svg" src="fallback.png" width="100%" height="100%"/>
</svg>
Pros:
Provides fallback in every device/browser I have tested (IE6-IE11, Android 2.0+, IOS3-7)
Only one image is loaded for each tested browser (except IE9-IE11)
Externally loaded images allows image to be cached
Cons:
Unable to use as scaleable (responsive) image in IE9-IE11 (see this question)
IE9-IE11 loads both images
IOS3-4 (Mobile Safari) has SVG support but displays the PNG (since it lacks inline SVG support)
SVG file must not have height / width attributes (unsure about this, but have read about it somewhere and in my tests my SVG did not have them anyway)
Does not validate
Please provide comments with additional pros / cons you can think of. I know for one SVG's can appear pixeled in some browsers, but I was unable to test zooming in since using browserstack for emulation.
Source: http://lynn.ru/examples/svg/en.html
I'm using the css sprite technique to hold all the buttons on the site in one PNG Image.
This technique works fine on all browsers on your normal Style Buttons, however for IE 7/8 it shows a border and a red x on any input where I use a css class to define the image. This technique works fine for Firefox.
Am I missing something here ?
HTML:
http://img85.imageshack.us/img85/7493/spriteerrorhtml.png
CSS:
http://img514.imageshack.us/img514/1382/spriteerrorcss.png
Comparison:
http://img99.imageshack.us/img99/3251/spriteerrorcomparison.png
The "red X" occurs because there is no SRC (or an invalid/not-available resource specified in the SRC) for the IMG element.
You can use a transparent "stub" image to fix that issue. Also, make sure to set BORDER=0 on the IMG as well (guess why :-).
Please try to change the background part from CSS code:
background: url('XXXXXXXX.png') no-repeat
I think it is a CSS parsing problem