I'm putting together a book flip where I flip pages using CSS, JavaScript and HTML. It works very well, except for this one thing.
Every image has a block-level parent. The block-level parent's dimensions has the same ratio as the image but it's scaled down to fit inside the window. Every image has a width:100%; and height:100%; declaration making it fit directly inside its block-level parent.
Now, this works great but when I start sliding the pages the animation's VERY slow and laggish because I scale the images down. If I remove the width and height declaration from the images the animation runs smoothly but the images exceed their block-level parent's dimensions.
What can I do to fix this? Creating a new image with new dimensions isn't an option since I want the images to fit inside every screen resolution.
The animation is only slow in the following browsers/OS'es:
Opera 10, Mac
Chrome 6, Mac
Firefox 3, Windows
Safari 5 and Firefox 3 on Mac and IE7 on Windows handle the animation very well but there are some browsers, where the performance gets killed when scaling down images.
I'm not sure if this will work in your use-case, but have you tried setting the images/blocks to display: absolute or display: fixed?
Because absolute and fixed elements are not in the flow, they do not cause reflows when their properties change, so that can drastically help speed things up, depending on the circumstances.
Could we see a little code, or maybe a live example?
Some browsers are very slow at image scaling. Chrome 8 is the worst at this, in my experience, being about 5x slower than FF3.6 when resizing large images.
You can use Canvas as a workaround on browsers that support it. It's not faster at the actual scaling (yet), but it lets you guarantee that you only scale the images once, when they're loaded, instead of over and over during rendering.
Related
I was trying to create a simple rotating planet with css and javascript. First I tried to put the image as a background, which worked fine in all browsers but the background-position animation had very poor performance in IE and quickly raised RAM usage (50-100 MB increase per second) until the browser crahsed. Then I decided to try using image in the planet div and animate its position which resulted in smooth animation with low memory consumption, but as you can see in the image below the image leaks beyond the border. The planet div has border-radius: 50%.
I've tried adding overflow: hidden to the planet but that didn't work. Is there a way, to prevent the leak from happening other than using some kind of mask?
So to answer my question, css3pie is not able to clip content in IE 7 and 8, therefore it is not possible.
You can only clip images with css3pie if you apply its behaviour on the img tag itself, or if you use the image as a background of a rounded container...
I guess you want the moon to rotate around the vertical (y) axis right? It'd be possible around the z-axis... but css3pie generates images on the fly so if you need to animate the content of a rounded container it'll redraw on every frame. So no solution for that really. Kill IE maybe!?
I'm wondering if this is something somewhat simple, but I'm having a problem ONLY on iPad with my sprited images. I have an tag that I use a sprite for to display an image of a star (similar to gmail or picasa) to indicate a favorite. On every other browser (including safari) on a computer, it's all completely fine.
The problem is on an iPad, it's showing more of the sprite than it should and it looks strange. What's even stranger is that this image is repeated several times and it doesn't seem to happen consistently.
Is this some sort of zoom issue or viewport setting problem specifically for iPad? It's driving me crazy, and anything I do to fix it cuts off some of the image and ruins the normal browser look.
Here's an example of what I mean since I can't put up the page I'm currently working on.
On this site I've worked on in the past, the viewing options look strange on an iPad:
http://demo.qlikview.com/index.aspx?section=Life
For example the "Download" viewing option looks different on the FEMA app than on the Kick It app so it doesn't even appear to be consistent.
Any help would be appreciated.
Thanks!
This is because the iPad scales your page.
The size of your element where the sprite is used is scaled and the sprite image to. But it seems not to behave precisely.
The same thing happens when you zoom out in safari. This is because an image is not scaled the same way in the browser then a dom element. A dom element is rendered as vector object. So when you zoom in or out, the lines keep sharp. When you do the same with a bitmap. It gets blurry and the browser need to guess how the image would look like smaller or bigger.
You have two options:
use more space between the sprites.
use EMs and not Pixels in your CSS
PS: Don't use !important in your css
Like meo pointed out, best option would be to leave space between the sprites.
There is also one last thing you can do, which is not to let the user zoom the web page by putting the following line in your tag. It would look the exact same as you view in the browser, which is pretty neat if you have loads of elements messed up in the iPad because of the sprite issue.
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />
Good luck!
The simplest fix for this is to put an outline around your spite with the border color the same as the parent container's background color. The outline is outside you element and does not effect layout. What you see is a problem mobile Webkit has when it scales down images with background color or background images, they bleed out of their container. The outline will sit on top of that and cover it.
What I usually do is just define separate images (non-sprited) for iPad users. I know it doesn't load as quickly as you're hoping for with sprited images, but I feel it's a price they have to pay. What I do is have individual images on the server with #media in your stylesheet to define different images for iPad browsers. A quick review of how to use #media for iPad can be found at:
http://css-tricks.com/snippets/css/ipad-specific-css/
I just ran into this problem as well. I've been leaving extra space between my sprites since I first noticed the iPad imperfections. However, my current project involved sprites and another element with CSS3 transforms. The combination made the sprites blurry, with strange clipping around the edges. I actually found a fix over at No more jagged edges in iOS. Try applying the following CSS to your sprites:
/* IOS fix for incorrectly scaled sprites */
-webkit-background-clip:padding-box;
background-clip:padding-box;
Those few lines worked magic in my project. Of course, YMMV.
I have a conceptual question about photo galleries like this:
http://www.nikesh.me/demo/image-hover.html
If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.
This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.
So, normal images are first scaled down:
-webkit-transform:scale(0.8);
And then upon hover scaled up:
-webkit-transform:scale(1.2);
My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.
What I want:
The full effect in browsers that support it. Important is that the zoomed version remains quality.
No effect at all for browsers that do not support it, yet a solid original dimension so that no layout is broken
It should work for both image orientations and there may be variety in image widths and heights too
Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.
If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.
<img src="yourImageSrc" width="80%" height="80%">
This would allow you to still keep your layout in tact if the user agent is not up to date.
** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.
If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?
I want to make one layout for all sizes and devices
Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.
There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.
Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.
In addition, CSS background-images cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).
Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.
I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.
Specifically, how do I predict/calculate the effect any of the browsers' zoom will have, for example, on width:950px? Are there any tools I can use to determine the new widths?
edit:
If I have a 950px div that is visually rendered 875px in, say, chrome, I could say chrome reduces fixed widths by approx. 92.1% after one crtl-. (950*.921= approx .875).
Try Firebug
Its an excellent plugin for Firefox, which lets you view variety of parameters.
You could play around with it and it would probably solve your problem.