Develop Reference

Parent DIV's CSS interferes with SVG animation

We've moved an SVG/JS animation created with the Adobe After Effects Bodymovin plugin from one Wordpress site to another. On the old site (which I unfortunately can't show you), the animation works flawlessly. On the new site, depending on the size of the browser window, the animation contains glitches that appear to be caused by some sort of rounding error in the animation mask.
On one or more edges of the globe, you can occasionally (depending on viewport width) see a one pixel-wide bit of the scrolling background graphic appear. See image.
I've isolated the animation in CodePen. It works fine here, no matter what size the viewport is set to.
However, when I introduce this tiny bit of CSS such as this...
margin: 0 auto;
width: 70%;
... into the style of the parent DIV, the glitch starts happening. See here.
On the original animation, the mask extends a lot further than the edges of the globe, so I suspect the fact that the mask now just reaches to the edges of the globe is some sort of Bodymovin optimization.
Given that this doesn't happen on the old site, I suspect there is some sort of CSS, or perhaps a setting in Bodymovin, that stops this from happening.
The Wordpress site is built with Divi, and the animation sits in a DIV nested inside many other DIVs (ie a module sitting in a column sitting in a row sitting in a section), and most of these DIVs have the width set to various percentages. So I don't think the solution will lie in simplifying the CSS.
Has anyone experienced a problem like this before? Or have suggestions that might help eliminate it?
I have also created an Issue in the Bodymovin GitHub page, but the response times there seem to vary greatly.

I have made some testning on the codepen and was able to make it work when i removed
transform: translate3d(0px, 0px, 0px);
so removing this line of the script should fix the problem
this.svgElement.style.transform="translate3d(0,0,0)")
Why are you trying to transform the svg, when its already transforming automaticly.
This is a possible fix if you still want to retain the settings with margin and width %.

You can avoid this issue by giving a width in pixels to #container the responsiveness of percentages sometimes causes pixels to be just slightly off. Use media-queries if you need to have different sizes for other screen dimensions.
#container {
margin: 0 auto;
width: 400px;
}

How to make whole page black except for some portion?

I am trying to make an effect in which the whole page would be dark except for a specific part that'll be transparent. That part would be a circle which would be moving randomly. Now where ever this circle goes on the page, content under the circle would be able to be seen while the whole remaining page would remain dark.
Where I AM?
I have created the script that'll move the circle randomly on the page but i can't get the effect. Don't know what to do.
Please take a look on the following image. It'll give you a better idea of what i am trying to achieve.
Now consider that this transparent circle is moving randomly on the page ( i have already made the script for that).
Kindly take a look on this fiddle. It'll show where i am.
Thank you..

This is simple matter of adding a giant box shadow to the moving div.
No extra elements required.
Unprefixed CSS
box-shadow: 0 0 0 9999px black;
JSfiddle Demo

Try using CSS Masks:
Just draw a circle in photoshop and use CSS techniques to apply the mask on the image.
CSS:
-webkit-mask-image: url('image.png');
More info here:
http://thenittygritty.co/css-masking
and here:
http://www.html5rocks.com/en/tutorials/masking/adobe/

Image Decode times from Chrome Timeline dev tool

I'm building a parallax scrolling website (aren't we all) that amongst other things, reveals an image as the user scrolls.
I've done the 'reveal' by putting the image in the background, and placing a solid filled div on top. I then animate this div from 100% height to 0% height based on the scroll position, thus revealing the background image.
I'm doing this kind of thing multiple times and unfortunately I'm getting slow down.
Using Chrome's built in Timeline feature, I can see that most of this slow down is from Image Decodes. For the above reveal, it's re-Decoding the image every frame, which takes 22ms per image per frame.
Does anyone know when the browser needs to do Image Decode and when it doesn't? It seems obviously to me that it would need to if I resized the image, but not that it would need to when I just half cover the image?
Thanks for your help.

I've battled with this problem a lot also. As yet I have not found anything concrete and my proposed solution does not seem to work in ALL cases and I have not been able to ascertain why.
Anyway...
It appears that when you animate a solid element over the top of an image, chrome forces a recode of the image.
There are two things I have tried and for the most part they have been successful.
If you add -webkit-transform : translate3d(0,0,0) to the covering element, you should find most, if not all of the image decodes disappear.
If adding the above CSS to the covering element itself does not help, try adding it to the image instead, or indeed try adding it to both elements.
My understanding is that using the 3d css property pushing the image into its own composite layer which is cached and handled by the GPU rather than the browsers software renderer.
90% of the time I have found one of the above combinations successful. I hope it helps.

How do you animate the property? I think you may have plenty of alternatives to just animating the height (which is some sort of resize of the container).
Maybe it's less intensive to just 'clip' the background image with another element. I found a thread about it on StackOverflow with some suggestions. If you animate with javascript, unfortunately pseudo elements are no option...
Clip/Crop background-image with CSS

Dynamic shaped div in HTML

Can I make a div with a custom shape? I mean, I have a rectangular div by default, and a few shapes can be obtained by exploiting the border-radius property of the div, but what I am looking for is a semi-leaf shaped element, something like this:
The picture isn't all that great, but that's what I am looking for. The elements in the div should be placed in this shape. How do I attain such functionality?
I am not just looking for just a shape, but an element which is shaped this way which could hold more elements.
The major issue I am facing if I use border-radius as the solution is that, I have floated images inside this div, now if I use border-radius, it is either clipped as in Firefox or overflows out of its border as in WebKit browsers. How do I get this content to strictly be inside the shaped div?

Regarding the shape of the div, you can achieve that by tweaking the radii of the border angles using the CSS border-radius property:
width:25px;
height:200px;
background-color:#333;
border-top-left-radius:50px 200px;
border-bottom-left-radius:50px 200px;
-moz-border-radius-topleft:50px 200px;
-moz-border-radius-bottomleft:50px 200px;
Easy working solid div demo: http://jsfiddle.net/AlienWebguy/83scc/1/
Doing it with just a border on a single div will NOT render well on a Mac - for example, if you just have a white background and a black border, the border will "cut out" and then "re-appear" due to the poor calculations of the Bézier curves and fill-ins. With just a background color (in the demo) it looks great. You could easily double up your divs, one white, and one 1 pixel larger black which sits underneath it, like so:
Working outline example: http://jsfiddle.net/AlienWebguy/83scc/3/
As far as the contents of the div, they won't naturally be positioned in such a way to compliment this shape, so you'll need to give them absolute positioning and give the parent an overflow:hidden; property.

Short answer: no. A div can't do that for you. At least, not across all browsers. It is, and always will be, a rectangular element at heart (even with rounded corners).
If you want to draw something like that, you can use the cool new canvas tag and whip up some javascript magic. If you're looking for something that will actually hold things correctly (with padding and all that), then take a look at this: Polygonal Divs -- Making content overflow in a specific shape?
I asked the same question a while ago in a slightly different format. It has some good answers.

You can use percentages, to make it adjust to different sizes ;)
Try resizing this (in a browser that supports CSS resize) http://jsfiddle.net/leaverou/XHbhr/1/ and observe how it changes to match its dimensions with no JavaScript whatsoever :)

Look at mozilla's documentation about border-radius, they have pretty good examples:
border-radius

How to simulate magnifying glass on Web-page image (Javascript)?

Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).

Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.

Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.

Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)

There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.

I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/

Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.