I am working on SVG to render a chart.
click here to view my SVG chart
When we view this chart in Google chrome or Internet Explorer we are getting two groups as expected. but when we render this on Mozilla Firefox, only the first group is getting rendered.
I am unable to trace this out. Pleas help me
Thanks :)
Your problem is setting no useful width and height on the <svg> and also no viewbox. The result is that it ends up 150px tall by 300px wide (the default replaced elements size in CSS) and clips off everything outside that. At least that's what happens in browsers that are actually following the SVG spec here, which IE and Chrome are not.
Related
I have a web app which looks as expected on all devices/browsers except on Safari on iOS.
Below is the expected, full screen view, where it shouldn't be possible to scroll in y-direction.
As said, this works fine everywhere, except in Safari on iOS where I can scroll in y-direction about 50% of the viewport height:
I've inspecting all elements in the inspector and can find nothing that explains this behavior, seems almost like it's something outside of the rendering tree, like some iOS feature, that causes it since even inspecting the root html element (like below) just highlights the expected part of the view (the part highlighted in blue in the picture at the bottom).
If anyone has has seen this issue and knows a possible cause, pls let me know.
On this page, the SVG elements do not show up in Firefox, but they are displayed in Chrome correctly. The program used to generate the svg is present on the page.
The elements are present in the HTML and have the correct dimensions and location when viewed via Firebug.
I am at a loss as to how to explain the discrepancy. Can someone offer any hypothesis?
I am using Firefox 24.0 and Chrome Version 29.0.1547.65
Update: This seems to be fixed in Firefox 25.0 The text rendering has also improved!
Your SVG element is not sized properly (and overflow is set to hidden) so the content is not shown. You can solve it by specifying the unit in your css:
min-height: 600px; /* instead of 600 */
in my site I have problem in proper rendering of icons in Google Chrome as shown.
As you can see the right and bottom edge of image seems to be cut-off. But the same icons renders properly in all other browser including IE, FF, Safari.
Following is the screenshot of mozilla for the same.
Actually icons are of very big size around almost 1000 X 1000px, and I'm showing that in 100 X 100px area. The problem is I can't scale down the images and I have to use these images only.
In chrome when I zoom-in or zoom-out my website, for a moment it renders correctly but again after some time is renders as shown above.
Any possible solution to this?
Thanks for your time!!
I have resolved it myself by using image-rendering css property.
I have a site that works fine in android browser, FF, Chrome, Safari IE9+ but in IE8 the upper half of an elements background disapears as well as the background color on a couple of input elements.
I have run through IE debugging tools and also W3C and there is nothing that is coming up that would make this occur.
The site in question is http://ukritic.com if anyone can check it in FF then IE8 and maybe suggest what could be causing the problem it would be greatly appreciated.
If you need anything from me let me know and I will post it up for you.
ADDITION:
The problem that is occurring is that in IE8 the white background containing the content is only visible 1/2 way down the page but is hidden on the upper half of the page and also hidden where the facebook like box is located.
In all other browsers the entire content container shows the #FFF background from the top of the page to the bottom of the page.
We have tested in IE compatibility and normal mode but the problem persists.
What I do notice is that while the page is loading the content container is white but as soon as the page loads completely it disappears on the top half and the facebook container.
Thanks
~M
The problem was in the border-radius.htc file as soon as I removed that call the page rendered perfectly.
There really is no effective way of rendering round corners on ie8 as the .htc file needs a relative path to the page that is rendered which does not really work well with dynamic depth address bars (shortUrls).
Guess I will have to settle for rounded corners only in IE9+ and all other browsers.
Thanks for the input
Here it is: http://appdist.me
On Firefox and IE it displays correctly, but not on Chrome and Safari.
I'm using svgweb, but still no good.
How can I get Chrome and Safari etc. to display the content the same way as Firefox and IE?
I'm not going to post any code, just view the source of the HTML. :)
Thank you.
It seems to work well in both Firefox and Chromium by setting width and height attributes on the object tags to 100% and setting width and height attributes of the SVG elements in keyboard-gray.svg and frame-home.svg to 100%. Check it out:
http://live.echo-flow.com/stackoverflow/appdist.me/
Unfortunately, I don't have a Windows box available to test this in IE at this time.