Given the SVG file at http://dpaste.com/756156/ when I display it in a <object> or <embed> tag, about half the time it loads in Firefox the bottom portion of the image is cut off. Using inline CSS renders it fine, and Chrome and IE9 render properly as well.
I've seen suggestions to add width and height attributes of "100%" to the SVG tag, but that hasn't helped. Any ideas?
Having just suffered this issue myself [svg being clipped in firefox] I found a solution.
It's a bit random and has no logic, but it fixed the issue for me.
My svg was a simple "cloud" shape drawn with Illustrator using bezier curves.
No matter how many times I drew it, the right-hand side (kind of a bubble shape) was being clipped by the browser. No amount of adjusting parameters (such as viewBox, x, y, width, height) would fix it. - It was still clipped. In fact by adjusting these parameters it became obvious that it wasn't caused by any of them.
The solution was to add more data to the curve. I simply added another anchor-point on the curve that was being clipped, and hey presto it rendered properly in firefox.
Random but true. Hope this helps
This might be caused by Firefox rendering the SVG before loading the stylesheet, then not realizing that it needs to update it. Try changing the classname of the SVG tag in the onload event (JavaScript), as suggested by this page: http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript
If that doesn't work? Try completely regenerating the element with elm.parentNode.innerHTML += '' as suggested in the comments to this StackOverflow question: https://stackoverflow.com/a/2922034/638544
This is what worked for me, after dealing with multiple chart libraries.
First, set the chart's SVG to visibility: hidden; in the CSS eg.(#pie_chart .ct-chart-pie {visibility: hidden;} )
Then re-render the chart and change visibility to visible.
function show_popup(){
Chartist.Pie('#pie_chart', data, options, responsiveOptions);
$("#pie_chart .ct-chart-pie").attr("style","visibility:visible !important;");
};
window.setTimeout( show_popup, 1 );
This was fixed recently by bug 1063073. The fix will appear in Firefox 34, after that workarounds will no longer be necessary.
Related
On one of our websites, we use a font from typotheque.com by importing it as follows:
#import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );
The font is displayed correctly on Chrome and the like. In Internet Explorer 11 on Windows 7, the font is rendered, but the width of it is not correct. It seems as if the width of the text is rendered before the font is applied.
As a consequence, the text gets overlapped and the words are not wrapping accurately:
On Chrome, the font width is calculated and the words are wrapped correctly:
Other things we tried:
We followed the instructions here on typotheque.com
We made sure to link the css files prior to the javascript files, as stated here.
Any hints or pushes in the right direction to solve this issue are much appreciated. You can find the website here: http://www.claireundgeorge.ch/fr/
Edit:
Added word-break: break-all; : no change
Removed all the font-awesome-stuff: no change
When you compare what is calculated in FireFox with what is calculated in IE you can see whats the bad boy here.
In IE the padding-bottom property of the h2 is 4px.
When i uncheck this property it looks fine for me.
I cannot upload pictures here due to the stupid reputation limit thing but i hope i descriped it good enough...
I also have typotheque webfont + IE problem. My workaround for now is a bit dirty: I use jquery $(window).load to adjust element padding by 1px, and then IE redraws the font correctly.
EDITED:
I have used tinymce editor to add text with external toolbar, Please look into it TINYMCE-DEMO
And everything is working same as i have mentioned below.
I have a transformed(scaled) div element with contentEditable="true". Now the problem is when I start typing on this div box then the blinking cursor sometime get hide in Firefox, but in chrome it is working perfectly. I don't understand what is wrong with this code.
Here is my code:
HTML-
<div contentEditable="true" id="textbox" class="scaleDiv">Add Text Here...</div>
CSS-
<style>
#textbox { width:400px;height:250px;background:#FFC0CB;word-wrap:break-word; padding:5px;}
.scaleDiv { -moz-transform:scale(0.5,0.5);-webkit-transform:scale(0.5,0.5);}
</style>
And Here is the
DEMO
If you move your cursor after typing from left to right or right to left then you can see the cursor - sometimes get visible and sometimes get hide.
Please Help...
It will be down to the use of different aliasing methods when scaling, or the fact that Chrome makes a concerted effort to keep the cursor alive. What is happening in FireFox is that at certain points the single vertical line (i.e. cursor) is being scaled away, this happens sometimes when using certain types of scaling, like nearest neighbour. This problem could be OS specific, I see it with the FF 26.0 on Windows.
For example:
Take this image:
And then scale it 0.75 (I've used PhotoShop and Nearest Neighbour here, but the principal is the same)
As you can see some of the lines have vanished.
Basically you need to look into if it is possible to change the type of scaling used in FireFox and with CSS. Sadly, from what I can see so far, it is only possible for images using the image-rendering css property or the Microsoft non-standard -ms-interpolation-mode...
I've googled a lot and I've just given up, so I'll turn to the experts out there to see if someone can help me in my quest.
I've got a logo converted to .SVG through illustrator.
My objective is to use that logo to clip (or mask if you prefer) an entire div so that just a small part of it shows through and you can see the background.
I decided to go the .SVG way since I want to create this website as a full scalable experience, and thus a .png would not work accurately from full HD resolutions to 1024x768.
So firstly I would like to know how to clip a Div and at the same time how to "inverse clip" so that instead of just showing that part of the div it would show everything but it.
I'll be eagerly awaiting your answers as I really need them...
Thank you in advance.
If I understood you correctly (and I'm not sure about that), you want to show 'everything in the background that fits the shape of your logo', is that correct? If though, what about 'inverting' your logo, making itself transparent and give the background a neutral color like black or white or something. Then you could put two divs upon each other, with the top being your Logo.
I created a fiddle to show you what I mean:
http://jsfiddle.net/ds82/R4rBH/2/
Der circle is the logo and it's transparent inside and outside the blue line and it's a svg. Hope that is what you want.
I don't think you are going to be able to do that. I once saw a plugin and a generator like this, though I think that that is probably not your best bet.
I would incorporate whatever text you wanted to clip in the svg which I'm sure is easier to do than finding a way for your html to interact properly with the svg.
Well since I couldn't do it through .svg I ended up just using a .png where everything is black and my Logo is transparent. Kind of sad that I couldn't find the answer though...
Basically what you want to do works only in Firefox at the moment. The way is to define the correct <mask> element in SVG and then apply it via CSS:
#content {
mask: url(remote.svg#logo-mask);
}
(or, if you embedded the SVG:)
#content {
mask: url(#logo-mask);
}
I have some nav elements positioned with transform: rotate() and box-shadow. When you hover them they 'pop out' a little bit to indicate you can click on them. In Chrome and Safari (indicating this is a webkit issue) when you hover some of the nav items the box shadows go haywire and cover up portions of other random elements. It works fine in Firefox.
I made a jsfiddle portraying the issue as simply as I could figure out how to:
http://jsfiddle.net/Q39eJ/1/
Hover over and then out of the first one or 2 elements and you'll see the issue in action.
The site I'm working on has the issue here:
http://temp.go-for-english.com/
(URL will soon change to http://www.go-for-english.com if this one doesn't work)
If anyone can figure out a work-around that still utilizes CSS3 to make it look normal (Maybe set the z-index again on the hovers, or some other weird workaround that I'm not sure about) I'd greatly appreciate it :) I'd really rather not resort to images :(
UPDATE:
I've been informed it looks fine on Windows Chrome =\ I'm using Mac OSX 10.6, here's a screenshot of the behavior I see:
http://s9.photobucket.com/albums/a74/nZifnab/?action=view¤t=Screenshot2012-01-19at13205PM.png
My client has also pointed out the issue because they use Safari.
I figured out a bit of a work-around that mostly works. Found this stackoverflow question: How can I force WebKit to redraw/repaint to propagate style changes? related to forcing a repaint of elements using javascript. So I updated my fiddle with this code to force a repaint of the elements with box shadows:
$(function() {
$('.top-nav a').hover(function() {
redrawMe($('.top-nav a'));
})
});
function redrawMe(obj) {
obj.hide();
obj.each(function() {
this.offsetHeight;
});
obj.show();
}
I tried only redrawing the element that was being hovered redrawMe($(this)); but it didn't work, when any of them gets hovered, I need to redraw all of them. Appears to mostly do the trick but there's still some darker shadows that appear in the cracks between each element. I feel that this is acceptable and barely noticeable. jsfiddle with my proof of concept:
http://jsfiddle.net/nzifnab/Q39eJ/4/
Haven't updated that live site with it yet, but shall soon.
If anyone can manage to find a way to make even the shadows between each element disappear I'll accept your answer instead :)
Again, this may only be happening on MacOS X in both chrome, and safari.
I am having issues embedding SVG into a webpage. I have found the simplest method to just use an image tag. For example:
<img src="my_graphic.svg" height="100"/>
Works in web-kit. I do not need to explicitly set the width and the browser will maintain the aspect ratio. Very nice!
This doesn't work in Firefox though - it's not cross browser. So how about embedding as an object?
<object type="image/svg+xml"
height="100"
width="554"
data="my_graphic.svgz">
<span/></object>
This time I'm using svgz and the mime type has been added and voila! It works in both firefox and webkit. However, in webkit I need to explicitly state the width or we get some nasty containing element scrollbars. But what's worse is the background is no longer transparent. It's rendered with a white background.
So one method works perfectly in webkit. The other works perfectly in mozilla. What can I do to get it working reliably in both?
Interested in a demonstration of this? See my link for reference:
http://sumocreations.com/demo/svg/new_dttg.html
I don't believe it's currently possible for the <object> to have a transparent background in WebKit. There's a bug filed for this problem. I don't know of a workaround.
The only work around I found was by detecting whether an img utilizing an SVG source is rendered properly. I do this by only specifying one dimension. Either the height or the width but not both. I can then test if the alternate dimension is greater than zero. If it is I hide the the object. If not I hide the image. Here is how to do it with jQuery:
<script type="text/javascript">
$(document).ready( function() {
if($('img.logo').width() < 1) {
$('img.logo').hide(); $('object.logo').show();
} else {
$('img.logo').show(); $('object.logo').hide();
}
});
</script>
See the demonstration: http://sumocreations.com/demo/svg/new_dttg.html
Place an <img> tag inside your object.
The object will render in firefox, and webkit should show the <img> tag.
Edit:
Also, what's up with the self closed span tag? <span> does not support self closing.