Is there any way to combine zoom property with values different from 1 and filter?
For example, zoom: .5 on block with AlphaImageLoader make transparent areas become black. Assigning background color fix this problem but I need it to be transparent...
Or maybe there is any way to scale with background images in IE6?..
After struggling about two days with this problem,
I found, that there is several reasons, causing transparent areas on child element become black:
zoom > 1 or < 1 on parent block;
position: relative or absolute on parent element;
negative left or top on child element;
clip on child element;
filter on the same element.
I didn't tested much, but in my case applying "filter: alpha(opacity=100);" to parent block helps to get rid of transparency bug.
Maybe this will be useful to somebody...
Related
I have one question about performance thing.
I have some animated Views, that have internally many layers (8 layers), but only 4 are visible at once, other have opacity of 0.
I am just wondering, if the surface has opacity of 0, is it rendered or is it culled down?
And if it is rendered, where/how do I disable it (mark non-renderable) with if-check?
Thanks!
Elements with opacity 0 don't render, and in famous, surfaces use perspective-3d which usually results in the browser compositing the contents as a gpu texture of sorts. This results in a huge performance increase.
Opacity 0 elements will still receive events however, which makes it different from, say, visibility hidden, which will ignore all events.
I have a circle div with border-radius 4px thick and overflow hidden. There are two elements inside.
When I move the elements inside it using a CSS transform they step over the border of the parent element.
After going over the border they disappear correctly, but I'd like them to disappear just before crossing the parent's border.
Check out the demo of the problem here:
http://codepen.io/vdel26/pen/KEBba
Thanks a lot!
I've been provided with 8 individual images (top left, top, top right etc) for a border around the main (fixed width) content box. If I was given a single image, I'd use border-image.
What's the best way to use the 8 images? Divs with absolute positioning? Or is it such a pain I should just combine them into one?
What's so hard about combining the images into one? It has numerous other advantages, like reducing the number of HTTP requests the client needs to make, for example.
An alternative is to use CSS3's multiple background image feature, where you'd set each image as a layer in your box.
Eric Myer used a technique whereby (just to explain technique) the image was a little circle. Then, that was the background graphic in four separate divs each abs positioned in the corners of a containing div w/relative position. Background position was changed for each and a regular border was used for the straight lines in effect getting rounded corners. The circle had to be filled with white or whatever bckgrnd color you used.
This way, one could expand. You still need to have the height expand should changes occur, right?
I'd make one for the top and bottom and a third that repeats on the Y for the middle, that way your box will expand if content is added. Height that is.
I want to use sprites for list background images. I have seen a few methods of doing this, but they all require set height and/or widths for each list item. The dimensions of each list item I have will be different so I can't set that.
Ideally, I want to be able to have a sprite image set up, then choose to display only part of it e.g. 50px by 50px in the top left corner, but I want the content of the list element to be able to be any height and width. I am also trying to ensure that the sprite image always remains centered in comparison to the list text next to it.
Any ideas?
I have noticed a problem with CSS3 rounded corners. They contain inner elements perfectly but when the container has a position:relative applied to it they no longer contain elements. I have set up 2 fiddles to explain.
This has the container set to position:relative
http://jsfiddle.net/abqHE/12/
This one isn't.
http://jsfiddle.net/abqHE/11/
You can see that we have a rounded container only when position is not applied. The problem is that we need to use positioning. Any ideas how to fix this.
Marvellous