综合技术

CSS scale transition issue on Firefox

微信扫一扫,分享到朋友圈

CSS scale transition issue on Firefox
0

I am working on a CSS scale transition and I’ve found some issues on Firefox (Mac). In short I have 2 divs
, the former scales down and fades out:

@-webkit-keyframes scaleDownTo {
  to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDownTo {
  to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDownTo {
  to { opacity: 0; transform: scale(.8); }
}

The latter scales down and fades in:

@-webkit-keyframes scaleDownFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleDownFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleDownFrom {
  from { opacity: 0; transform: scale(1.5); }
}

The issue is on the appearing div
: during the transition, when it comes out, the size does not cover the parent div
and its position is anchored at the top left corner. When the transition ends up, the div
suddenly gets its original size and position.

Note: I’ve found this snippet on a Codrops tutorial and I’ve noticed that it also happens on their demo ( view example
-> choose the transition called SCALE DOWN / SCALE DOWN
), so I was wondering if it’s just a FF bug or there’s a fix for that. Maybe someone can test it on PC+FF and let me know if it does work or not.

Thanks a lot!

UPDATE: Here is a fiddle
that I’ve created. As you can see, the issue happens on Firefox when the container width is > than the image size.

Problem courtesy of: user1861373

Solution

There is more to this than you have demonstrated.

I have recreated (based upon what you have supplied) a carousel using Owl Slider. Firstly this Slider has a few issues which are inherent such as support in IE for transitions – they are not supported in IE – people be warned
.

Secondly when I use animation-delay:
in Firefox it breaks the animation, if it is not present the animation works; albeit without the delay – which in this case I can live with. I would say that this is your issue, as it resets the image as you describe and the animation continues after that point.

In your fiddle you have not supplied all the required files, therefore it doesn’t even move through all the slides so the whole thing had to be re-created to have an insight into how it works.

Please see my demo for clarification > http://codepen.io/mofeenster/pen/smwAD

Solution courtesy of: Morgan Feeney

阅读原文...


微信扫一扫,分享到朋友圈

CSS scale transition issue on Firefox
0

CSS3 Recipes

薪酬改革、降低成本 京东物流的盈利焦虑

上一篇

ArcGIS Online TLS 1.2 Only Enforcement Tomorrow!

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

CSS scale transition issue on Firefox

长按储存图像,分享给朋友