I'm trying to use inline SVG for our icons. Specifically I am:
Combining all svg's into an svg sprite with grunt
Referencing them inline with the <use> tag ala this article
For the most part things are working well. However, I've run into problems on iOS browsers when I try to hide/show them with JS - http://codepen.io/meanspa/pen/vEGERZ
$('.expand-link').click(function(){
$('.expand-link').toggleClass('clicked');
});
Because for this codepen the SVG definitions are in the DOM it works fine as-is, but if you move them to an external file and try to use it in mobile Safari, the SVG that's hidden originally (.icon-contract) won't display when you click on it. In fact, the only way I've found to make this work is to set .icon-contract to display:block initially, and then set a delay in JS so that it hides it after a few hundred milliseconds.
So just to summarize, it looks like in mobile Safari:
If you're using the <use> tag to reference svg's in an external file
And if some of those are display:none when the page loads
Then they can't be displayed with JS after the fact
Has anybody else run into this problem?
Thanks.
Update: As Salmonface pointed out, only noticing this on iOS 7 and older, looks like it's fixed in newer versions.
Chris Coyier posted this workaround:
Use "width:0px; height:0px;" instead of "display:none".
Working great for me so far.
Related
UPDATE: I have updated this post more than 5 times but still couldn't
get appropriate answer , I'll appreciate if you could read my question
carefully and answer it <3
I want to create slideshow just like bwin's mobile version website. I started to analyse how it works. but it works weird, if you use inspect element in google chrome or any browsers you can see the slideshow works without any inline styles added dynamically.
in every slideshows that I've seen before there was inline styles that they added to HTML tags in a specific time interval. in this case I can't see any inline styles that add to tags but it works like a charm. I checked the CSS files for the keyframe property and there was nothing and of curse they don't use transition too.
for more information is good to say they use angular as their front-end framework.
Note: please open the mobile version of the website in computer to see what is going on !
The address is : https://sports.m.bwin.com/en/sports
I'll be appreciated if you tell how does the bwin's slideshow works? and how to create this slideshow?
thanks a lot <3
UPDATE: Special thanks to Sergiu Paraschiv that he figured out google
chrome's dev tools doesn't show inline changes for translateX property
of DOM Shadows , he tested the bwin's mobile version with his Safari
in his Mac machine and he captured screenshot "imgur.com/a/Php4EhB" ,
so you can see the inline changes in Safari browser of Mac OS . Why
google chrome or firefox doesn't show the changes of inline translateX
property of the DOM Shadows?
Inserting an animated SVG via jquery (or plain javascript) makes them appear static in Chrome and Edge, although they show up fine in Firefox:
$(".loader").prepend("<svg><use xlink:href='/images/icons.svg#loading-ring'></use></svg>");
Inserting from a separate file and using an object or img tag seems to work fine in Firefox and Chrome, but still not Edge:
$(".loader").prepend("<object data='/images/loading-ring.svg' type='image/svg+xml'></object>");
Also see:
jsfiddle
Am I going about this the wrong way or is browser compatibility just really spotty?
Yes, you are right, unfortunately edge and old ie doesn't support the svg animations with SMIL.
Check here: http://caniuse.com/#search=svg%20animation
I'm currently building a site where I'm using fonts.com to display a custom font for headers and subheaders. The font gets loaded via fonts.com javascript link and is then referenced in the CSS file as:
font-family: 'MyFontFromFontsDotCom';
It works fine and performs well. In IE8, however, the browser crashes after the font gets loaded (it never loads fully though) and the site. When I hit the "stop" button in the browser, the site gets rendered with the correct font.
I have a modernizr 2.6.2 running aswell which is referenced before the fonts.com javascript. When I remove the fonts.com javascript, the site runs just fine.
The fonts.com javascript reference is at the bottom of the body tag and the modernizr is at the head tag. I tried moving them around without any luck.
Has anyone experienced the same issue?
Thanks in advance.
I came across this issue when I was cross browser testing a site on IE 8. I fixed the issue by using the 'Non-javascript' (CSS) option.
You can get to this by going to the Manage Web Fonts section on fonts.com, selecting your project and then clicking the 'Publish Options' link.
In the window that pops up there is a tab for 'Option 2: Non-Javascript', this will give you a code snippet for CSS instead of Javascript. You should paste this in the head and then remove the Javascript snippet.
I know an answer was already accepted for this, and it is perfectly valid solution (using the CSS option instead of the Javascript option), but there is another possible solution if you do need the Javascript option (I like to have the -active classes added to my document).
It turns out there is a known issue with the fonts.com Javascript on IE8 when there are unclosed tags. So if you have a situation like:
<div><span>March 2014</div>
This will cause the fonts.com Javascript to cause troubles.
So find and fix unclosed tags with the W3C validator!
I'm currently doing some redesign of a website, basically just upgrading it to a more up-to-date look and trying to make it as resolution independent as possible, and in the name of resolution independence I figured I'd try to use SVG images in the design where the browser supports SVG images in <img> tags. The reason I want to stick to just using SVG in <img> tags rather than using some more ambitious solution is that AFAIK Chrome, Opera and Safari all support it and FF4 seems like it may finally get it as well combined with the fact that the entire site is built on a custom CMS which would have to be partially rewritten to start changing the output HTML (currently it supports custom design images, custom CSS and custom JS includes for each theme).
Now, I've looked around the net a bit myself trying to figure out the best way of doing this and for some reason pretty much every suggested solution I've found has worked poorly (one detect FF3.x as supporting SVG in <img> tags so they didn't display properly there, another one never tried at all, several were overly complex "replace all images with SVG if there is support for it" functions which won't work too well either.
What I'm looking for is really a small snippet that can be called like this (btw, I'm using JQuery with this new theme for the website):
if(SVGSupported()) {
$('#header img#logo').attr('src','themes/newTheme/logo.svg');
/* More specified image replacements for CSS and HTML here */
}
Does anyone actually have a working solution for this that doesn't give inaccurate output? If so I'd be very grateful.
This appears to be the ultimate answer: Javascript: How can I delay returning a value for img.complete. Unless someone comes up with something yielding the correct results immediately.
For old browsers you could use the <object> or <iframe> tag, but that is not a nice solution. Firefox and IE9 (don't know about other browsers) have implemented inline svg now, which can easily be detected:
// From the Modernizr source
var inlineSVG = (function() {
var div = document.createElement('div');
div.innerHTML = '<svg/>';
return (div.firstChild && div.firstChild.namespaceURI) == 'http://www.w3.org/2000/svg';
})();
if( inlineSVG ){
alert( 'inline SVG supported');
}
So, you could replace all images by svg tags then. And I hope, but I have to google on that, that every browser that supports inline svg will support svg as image source.
A good discussion/comparison of methods is here:
http://www.voormedia.nl/blog/2012/10/displaying-and-detecting-support-for-svg-images
Based on that page, I wound up using this:
svgsupport = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")
I've been meaning to write a blog post about this, but here's a snippet that should work:
function SVGSupported() {
var testImg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
var img = document.createElement('img')
img.setAttribute('src',testImg);
return img.complete;
}
Based on a script by Alexis "Fyrd" Deveria, posted on his Opera blog.
I'm using something similar on my blog, which you can see in action here: http://blog.echo-flow.com/2010/10/16/masters-thesis-update-1/
It will use <img> if supported; if not, and we're not on IE, it will use the a regular object tag; otherwise, it will use an object tag specially created for svg-web. fakesmil is used for the gradient animation. It seems to work everywhere I've tested it. The script that does the work for this example can be found here: http://blog.echo-flow.com/media/js/svgreplace.js
This problem occurs in Firefox and Chrome, but Safari is fine. IE8, however, in compatability mode or not, doesn't load the overlay over the top (it just sits at the top, scrolling the content down - although I guess this is because the overlay is at the top of the markup).
It also doesn't show the image I'm attempting to show, but shrinks the overlay loading image to nothing in the top left of the screen. I am using the standard colorbox-min and the CSS that goes with that.
Inspecting the markup in the IE8 dev tools seems to hint that the content is not actually loaded into the cboxLoadedContent div.
$(document).ready(function() {
$('a[rel="preview"]').colorbox(
{
photo: true
, maxWidth: '95%'
, maxHeight: '95%'
, photoScaling: true
}
);
});
basically the page is a list of media images and when you click one it gives you the preview and allows you to scroll through ones on the page
well at least it does in FF took a little screenshot as it was shrinking the overlay thingy http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png
Anyone have any ideas?
I expect my explanation is not great, so maybe I could take a movie of it or something if needed.
Is your code wrapped in a ready function? I've seen instances where code that works in FF/Safari fails in IE because IE seems to load the DOM more slowly. In those cases it almost always turns out that I've failed to wrap the code in a ready function.
$(function() { // the important bit
$('.colorbox').load('...').colorbox();
});
Try an XHTML strict doctype...?
I've experienced the exact same symptoms - but in my case it extended to all browsers.
One cause was that I didn't include the CSS file that I use for pages that use colorbox.
Another cause was I updated to the newest version of jQuery, but didn't upgrade colorbox. (Also, if you update your jquery include, make sure that you also update your jquery vs doc - if you're even using it).
Hope that helps.
Search through your colorbox files for this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
There will be several instances of it, each pointing to a png. Make sure the path to that png is correct, then test it again.
I'm pretty sure I had this exact problem at one point, and fixing the paths was all I needed to do. However, it's been a while so my memory is a little fuzzy.
I had the same issue. I also had a problem with the image being only 10px wide due to IE not liking CSS max-width being set to 100%. To alleviate the problem I add the following to my CSS.
.cboxIE img
{
max-width:none;
_max-width:none;
}