Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
Related
I have an animated SVG that I'm using as a background on a website. It work fine on screen with at least QHD resolution, however on anything with 1080p or lower, the SVG doesn't show at all.
https://entofm.co.uk/beta
I am really stressed out with this, i have built an entire designer with Fabricjs, gone through some right hoops with the text to make it work how it's needed. The problem is now when the data from the canvas is sent to the server for a full resolution render with NodeJs (fabricjs in node) the fonts are coming out looking different to they do in the browser.
All the fonts are installed on the server, and the correct font does render, it just seems to have different spacing between the characters even though the fabric version is the same and all the extension code is the same on browser and server side, all the TTF fonts are the same etc etc
Here is the browser version:
And here is the node js version:
As you can see the font is correct on the node one compared to the browser one, but it's being rendered slightly differently.
Is there a solution anyone knows of to fix this?
I don't believe that there is any way to solve this problem when using fabric.js
Text in fabric.js can be scaled arbitrarily, but then it is rasterized and displayed as a canvas object like any other image.
You can see in the fabric.js demos that the text will stretch like an image until your input is complete, then it re-renders to a new image at that scale.
Knowing that this is how fabric.js handles text, it is possible to select two scales that produce quite different results:
In the image above you can see that the two fonts are pretty much the same size, but the one on the right (slightly larger) has been rasterized such that it appears to have a bolder appearance. It's the best example I could reproduce with limited time.
This is why rendering the fabric.js objects in your browser at a smaller resolution than the server will lead to the font appearing slightly different.
If you try rendering the browser version at the same size as the server you are likely going to get the same results.
We have been provided with a Photoshop created specification for a website. It gives specific pixel-based panel widths and various font sizes for different items (in points).
For example, the text in a data grid is 12pt Verdana. The grid is 765px wide.
When rendered in a browser (Chrome or IE) at 100%, the grid is 765px as expected, but the font appears larger than the design (around 20-25% larger in the browser).
We suspected the DPI settings in Photoshop might be a cause, but if anything they should have had the opposite effect (Photoshop doc set to 72DPI, Windows/browsers rendering at 96DPI).
Any suggestions on what we are overlooking? Should the Photoshop file be authored at 96DPI?
Here is another discussion about pt vs px in photoshop and how you can change to px instead. Maybe it helps :)
https://stackoverflow.com/questions/3868627/photoshop-pt-size-conversion-to-web
Make sure your photoshop document is set to 72ppi, then it will match browser size
Under CS2 its a simple process of going into the Edit Menu -> Preferences Submenu -> Units and Rulers then change the units type to pixels.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)
I'd like to improve upon jQuery's dialog code by using CSS-sprites, and thus also add animations of the dialog borders.
To do this, i'd like all the artwork to be in 1 png file, a css sprite.
My problem is that in order to support a dialog that maximizes to 2 or 3 monitors, i think i'd have to put 5000px wide / high border graphics in the css sprite file. Because i can't find a way to resize a selected portion of a css sprite image.
Basically i want to resize from the sprite image a region (t,l,w,h) to a DIV or IMG on my page with a different width and height.
I'd like to know, is this even possible? It seems background-position does not support this at all.
I've tried the first solution in How can I scale an image in a CSS sprite, but could not get it to work using that.
I've tried using the new background-size property in conjunction with background-position, but that also does not produce the results i want.
Spent another few hours twiddling with css, but could not get sprites to work for dialogs.
But my animated dialogs don't need many frames (not unless you want to put actual video as a dialog backdrop online), so for the dialog theme i'm designing now i have 8 312x312 png's as frames, 8 requests, 386kb total. Just enough to create a glowing animation for when the dialog is in a "highlighted" state. It's do-able.
I'm using the technique from How can I scale an image in a CSS sprite
See http://mediabeez.ws in about a month for the opensource release of animated dialogs.
I will be developing and testing this standalone component when it's used by my own homegrown CMS, so it will have the ability do be themed, dragged and dropped, things like that.