This is kind of hard to explain, so I'll start by linking to a my CodePen that demonstrates the issue, and ask you to open it in IE11 to see the issue, and another browser (Chrome, for example) to see expected behavior: https://codepen.io/malcalevak/pen/OmPExK
The gist of it is that I'm trying to draw in an SVG path, and I've set the stroke-dasharray to match the length of the path, and then offset my SVG by that length (in the example, I've shifted it, so you see something happen). I then use Greensock to transition the stroke-dashoffset to 0 (or 250 in the sample). At first, I thought it was just broken in IE11. I even tried manually changing the CSS and inline values to no effect. But then, after shifting the stroke-dashoffset, I saw what was happening. It seems like IE11 takes the original stroke-dashoffset, and creates a permanent, immovable dash! You can shift the dash-array, but it's only visible around that original dash. So in the CodePen, I've got my CSS:
svg.line1 .line-draw {
opacity: 0.17;
fill: none;
stroke: #ababaa;
stroke-width: 6.2px;
stroke-dasharray: 545;
stroke-dashoffset: 500;
}
This bizarre "fixed dash" limits me to only animating between the 500 and 545...which you can see with my second tween:
TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '250', ease: Power0.easeNone});
TweenLite.to($('.line1 path'), 1, {strokeDashoffset: '520', ease: Power0.easeNone, delay: 1});
Initially, you should have the line drawn from 545 to 500, with 1s of animation drawing down to 250, followed by another 1s animation shortening it to 520. This works in Chrome, but in IE11 all I get is a tiny shift, after the delay, of 500 to 520.
And what confounds me is that I couldn't find this documented anywhere!
Can anyone explain what's going on?
I will state that I've got some alternative solutions to do what I need, I'd just like to understand why it's happening, etc!
Related
I have looked for an animation that moves image forward, at the same time flips and grows, to give the impression of walking forward. I tried creating this in photoshop, which works, but I couldn't resolve the problem of the space it takes up, disrupting other more important items on the page. I have tried adapting the 'rocket' from http://www.the-art-of-web.com/css/css-animation/ but don't know enough to add the flip I will add image to show what i am trying to do. - ok it seems I dont have enough reputation to post images, but i dont know how to get reputation!! Images would appear consecutively left to right.
This is not the image I will be using but demonstrates what I need. The one I will be using is copyright. All except the front center image is the same image (when I use my original there will be four different images center front).
Any help would be greatly appreciated.
setTimeout(function() {
var thething = document.querySelector('.thething');
thething.style.transform = 'perspective(500px) rotateY(80deg) translateX(-500px)';
}, 1000);
.thething {
background-color: red;
transition: transform 5s;
transform: perspective(500px) rotateY(80deg);
height: 200px;
width: 500px;
margin-top: 100px;
}
<div class="thething"></div>
This is generally what it might take to do the animation; I know it's not quite as involved as what you described in your comment, but largely it would involve a lot of grunt work and changing the numbers around. Let me know if there's anything critical here that you'd have trouble theorizing a way to do it.
My font is doing something weird. There seems to be space being added below the font (Not the margin) that is pushing it up above the line-height. If I adjust the height it seems to be anchored to the bottom of the line height so instead of increasing the space below it actually pushes the top of the font above the line height. Is there any way, save adding margin or padding to the top, to make sure it's anchoring to the top of the line-height or middle?
CSS:
#font-face {font-family: 'AvenirLTStd-Book';src: url('/us/_media/font/2CA9EF_0_0.eot');src: url('/us/_media/font/2CA9EF_0_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_0_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_0_0.woff') format('woff'),url('/us/_media/font/2CA9EF_0_0.ttf') format('truetype');}
#font-face {font-family: 'AvenirLTStd-Black';src: url('/us/_media/font/2CA9EF_1_0.eot');src: url('/us/_media/font/2CA9EF_1_0.eot?#iefix') format('embedded-opentype'),url('/us/_media/font/2CA9EF_1_0.woff2') format('woff2'),url('/us/_media/font/2CA9EF_1_0.woff') format('woff'),url('/us/_media/font/2CA9EF_1_0.ttf') format('truetype');}
h1,h2,h3,h4,h5,h6 {
font-family:'AvenirLTStd-Black', Arial, sans-serif;
margin-top: 0;
font-weight: normal;
line-height: 1em;
color: inherit;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
letter-spacing:1px;
}
I know this is old, but I thought I'd leave a comment for others Googling this issue.
It looks like you are using Avenir from MyFonts.com, which allows you to 'tweak' your webfont package.
I had the same issue as above, changing the Line Height Adjustments to use Bounding Box (Match the bounding box of the glyphs, line gap will always be 0) fixed the issue
I used the settings in the screenshot below:
[link to screenshot is down]
The idea is to increase line-height to decrease the space at the baseline, i.e.:
h1 {
font-size: 2rem;
line-height: 3rem;
}
I was on this for a while now and since I have no Myfonts.com account and the font is free font generated by FontsQuirrel or downloaded from GF I had to experiment. In PS my font looks correct by comparison,
Montserrat vs Open Sans
But webfont is completely off.
I was than forced to test several font editing software. First I tested FontForge and could simply not figure out the proper metrics, than i got trial FontCreator that has this great feature that auto calculates the metrics which when entered in FontForge fix the issue.
But paying $79.00 min to just fix this and never use the software again did not seem feasible and I also did not want to go back and forth between the two to get the metrics. I continued to play with FontForge and finally found the solution. You must reset all values to 0 in Element -> Font Info -> OS/2 -> Metrics and than uncheck the "Is Offset"
Instead another image here is short video that shows how to fix this
http://take.ms/rJpqh
Note that for some fonts it is better to uncheck the Really use Typo metrics which helped in my case.
The attribute you have missed out is 'vertical-align' and it is probably causing all of the trouble
This tells the browser where to align the text
It has the following values (not all are listed):
baseline
sub
super
middle
top
bottom
To find out more click here
The situation:
Parent div: 300px
Child 1: 50px width, 5 px border
Child 2: 232px width, 8px margin left
Works fine in chrome and IE, but Safari and firefox drop the second one to the new line. Any reason for this? If I remove 1 px to the overall, like having a 7px left margin, they fit into place. Also, measurements match perfectly in firebug, so I don't see why thew two are not fitting in the same line.
Try removing all other padding or margin from Parent div and children. These are caused from default browser styles. (or use CSS Reset to do this for all your elements)
Also, as a note, Safari and Opera are a little bit lying about measurements if you have a decimal number. They round up or down, they are not so exact like Firefox or Chrome.
I have been experimenting with some css3 features lately and I found some strange behaviours. (I use firefox-nightly 18.0a1 (2012-09-24) and chrome Version 22.0.1229.91 beta)
I wanted to make a circle box with say a black background, and a gradient border say blue to transparent.
So I thought I could use 2 different background and clip one (the black one) on the content-box, to make the blue/transparent one appear on the padding-box remaining out of the content-box.
background: -webkit-linear-gradient(0deg, black, black), -webkit-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background: -moz-linear-gradient(0deg, black, black), -moz-linear-gradient(-90deg, rgb(0, 102, 204), rgba(0, 102, 204, 0);
background-clip: content-box, border-box;
It works perfectly fine in Chrome, but in firefox, the different background clips don't seems to be applied, instead, only the latter one is applied, so both background are cliped the same way, so one can't see the blue/transparent background.
Then, I started to want to put an external border around it, say a thin blue border.
so I added :
border: 3px solid blue;
Chrome displayed my circle in a very strange way :
Everything was clipped in a circle-shape because of the border-radius, but the content became a square.
I made a jsfiddle to make things clear : http://jsfiddle.net/wUtPX/
Is this some known bugs ?
Should I report them to some bug trackers ?
I'm reading the MDN specs for background-size. Here they explicitly say that:
Values for the multiple backgrounds, defined by background-image, may
be listed separated by commas
While in background-clip specs it's not clear. So maybe it doesn't support multiple values.
Also, the W3C specs don't include background-clip in "Layering Multiple Background Images" how-to. So i guess it shouldn't support multiple proprieties, and what Chrome is doing is actually "wrong".
You can probably find a workaround with background-origin (which supports multiple values) and background-size, for example:
background-origin: border-box, content-box;
background-size: 100% 100%, 99% 99%;
I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a border-radius along with overflow:hidden so that any content is cropped to the shape of the border radius.
This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.
Here is my code:
http://jsfiddle.net/doublewombat/EqK6R/embedded/result/
The div with the class name curvedEdges has the border-radius and overflow:hidden. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of curvedEdges. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.
So is this a bug in Webkit, or have I got something wrong?
Here it is on YouTube if you don't have a Webkit browser handy...
http://www.youtube.com/watch?v=3vyVy21nWsE
Firstly, what a cool demo!
I had a look around and it seems a problem not on you are having. The second answer to someone else's problem fixed it for me, although this doesn't work for safari. The fix is to use masking:
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
The accepted answer to that same question has another fix, which I think could really help you out, but I couldn't seem to get the right combination of elements and border-radius.
I'd been trying to do the same, and was using border-radius to mask elements to a circle.
I was able to use masking and a radial gradient to achieve the desired affect in Safari 6.0.3 (with transitions in position and size).
Here's the single line of code I added to the container (masking) element:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
I thought I would have to use hard color stops, as follows, to get the hard edge:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
However, it works the same without (perhaps someone can enlighten us on why). The clipping is not as smooth as with border-radius, but it beats the heck out of the image unpredictably exceeding the bounds.
You may need to adjust this for use with older versions of Safari/Chrome etc., I haven't tested it on different versions (aka YMMV).
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
Basically, when you apply animation to an element, the browser will handle it in the GPU (Graphics Processing Unit) for performance reasons, while the rest is handled by the CPU. That ends up rendering the animation above the mask.
As a workaround you can try adding an imperceptible transform property, that will also trigger GPU handling for the mask element, promoting it to the same level of the animation:
#redAlert .curvedEdge {
-webkit-transform: rotate(0.000001deg);
}
I guess it may vary depending on browser version, but these other values have also been reported to trigger GPU handling: rotate(0), translateZ(0)
It seems like its an issue with the GPU/hardware compositing. transform: translateZ(0); should fix the issue as well. For more information on this, read http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
-webkit-transform: translateZ(0);
transform: translateZ(0);
I have included vendor prefixes but you can remove them if you want.
Seems its a mixed working fix:
.wrap {
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
http://jsfiddle.net/qWdf6/82/
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
border-radius; overflow: hidden, and text is not clipped
Just as a heads up, this fix only worked for me if I applied the mask on a container with border-radius, but no border. Ultimately I ended up with something like this:
<div style="border-radius: 15px; border: 1px solid red;">
<div style="border-radius: 15px; overflow: hidden; -webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);">
<span style="position: relative; left; -20px;">Some stuff that overflows.</span>
</div>
</div>
With a border on the inner div, the clipping wasn't perfect.
Totally weird.
I found another possible solution to this bug, using CSS3 clip-path, but it only works in recent versions of webkit (it seems to work in Chrome 24, but not Safari 6.0.2). The following will clip a circle around the element:
-webkit-clip-path: circle(50%, 50%, 100%);
Hopefully this will be implemented by more browsers soon! It seems like this feature could have a lot of cool applications. Here's a relevant blog post: http://blog.romanliutikov.com/coding/css-clip-path-landed-in-webkit/.