CODEWITHSUNDEEP
htmlcsscss-transitions
Forest Katsch
Forest Katsch

Reputation: 1555

Is there a way to disable transitions during zooming?

When I zoom in on a page that uses CSS3's transition property on things such as width, height, padding, margin, etc., the elements will transition when you zoom in and out. Is there a way to disable this?

JSFiddle: http://jsfiddle.net/forestka/fPBjB/

Updated JSFiddle: http://jsfiddle.net/forestka/8jBjk/2/

Upvotes: 0

Views: 352

Answers (2)

raam86
raam86

Reputation: 6871

In your transition property you specify all

you can do something like

 transition: opacity 1s ease;

notice here (MDN) transition-property is used while you used the shorthand version so you specified:

transition-property: all;

More specifically the left property is changed when you change zoom and this is the reason the transition is fired. Notice that when you use something like font-size there is no animation since it doesn't change on zoom. You can bind the transition to an event like ready and fire it with javascript.

Upvotes: 1

daniel1426
daniel1426

Reputation: 169

check out this answer on stackoverflow:

https://stackoverflow.com/a/20549817/1985601

"It works by adding the transition css when you click the buttons, and when you zoom the browser window, it removes that css.

This works on Firefox and Chrome, but not IE. On Firefox, when you zoom, the transition continues as normal, and the zooming doesn't affect it. On Chrome, the transition fast-forwards to its final state."

Upvotes: 1

Related Questions