Are UK pensions taxed twice?

What is the difference between nullifying your vote and not going to vote at all?

Is there an evolutionary advantage to having two heads?

In what episode of TOS did a character on the bridge make a comment about raising the number 1 to some power?

What does "Marchentalender" on the front of a postcard mean?

What does "tea juice" mean in this context?

What is the indigenous Russian word for a wild boar?

Intuition behind eigenvalues of an adjacency matrix

Is floating in space similar to falling under gravity?

Preserving culinary oils

Possible nonclassical ion from a bicyclic system

Did airlines fly their aircraft slower in response to oil prices in the 1970s?

Strange math syntax in old basic listing

Could IPv6 make NAT / port numbers redundant?

How do I subvert the tropes of a train heist?

What is the 中 in ダウンロード中？

How was Apollo supposed to rendezvous in the case of a lunar abort?

Uncommanded roll at high speed

A "distinguishing" family of subsets

Biblical Basis for 400 years of silence between old and new testament

Mother abusing my finances

How to detach yourself from a character you're going to kill?

The deliberate use of misleading terminology

If a massive object like Jupiter flew past the Earth how close would it need to come to pull people off of the surface?

css transition not working in mobile chrome

IOS Safari transition transform not workingTransitions on the display: propertyPrevent flicker on webkit-transition of webkit-transformHow can I transition height: 0; to height: auto; using CSS?Jerky CSS transform transition in ChromeCSS translate transition delayed on mousemove in Chromecss animation rotate and translate doesn't work togetherCSS transition of a div does not animateNot Executing CSS3 Transition OutCSS Transition from Animated StateHover animation jerks when mouse leaves (using CSS transitions and transforms)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

3

0

I'm trying to scale an image with css transition upon clicking some text.

The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css transition: transform 200ms.

It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!

Codepen link: https://codepen.io/anon/pen/oqBJzr

CSS:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

JavaScript:

function checkMarkAnim() 

 $('.checkmark').toggleClass('scale');

Any pointers on what has gone wrong would really help.

Thank you in advance

Update:

The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).

css-transitions css-transforms

share|improve this question

edited Mar 21 '18 at 10:41

HMS

asked Mar 20 '18 at 12:39

HMSHMS

185

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Did you try -webkit-transition: -webkit-transform 200ms;?
  
  – adprocas
  Mar 20 '18 at 12:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yep, that should work. Due to Apple's restrictions, Chrome uses older webkit (same as Safari) on iOS, and it supports only vendor-prefixed transform. stackoverflow.com/questions/30128587/…
  
  – helb
  Mar 20 '18 at 12:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of IOS Safari transition transform not working
  
  – adprocas
  Mar 20 '18 at 12:53
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thank you @adpro! Yes, that does seem to work! I had tried: -webkit-transition: transform 200ms; I didn't realise it needed -webkit-transform
  
  – HMS
  Mar 20 '18 at 13:02
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Glad I could help. Even though the possible duplicate isn't exactly the same (without mention of Chrome) it is best to keep this question around and have it marked as duplicate so more people with your exact issue can find the solution. And welcome to stackoverflow.
  
  – adprocas
  Mar 20 '18 at 13:11
  

  
  
  
  

 | 
show 3 more comments

3

0

I'm trying to scale an image with css transition upon clicking some text.

The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css transition: transform 200ms.

It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!

Codepen link: https://codepen.io/anon/pen/oqBJzr

CSS:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

JavaScript:

function checkMarkAnim() 

 $('.checkmark').toggleClass('scale');

Any pointers on what has gone wrong would really help.

Thank you in advance

Update:

The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).

css-transitions css-transforms

share|improve this question

edited Mar 21 '18 at 10:41

HMS

asked Mar 20 '18 at 12:39

HMSHMS

185

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Did you try -webkit-transition: -webkit-transform 200ms;?
  
  – adprocas
  Mar 20 '18 at 12:48
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Yep, that should work. Due to Apple's restrictions, Chrome uses older webkit (same as Safari) on iOS, and it supports only vendor-prefixed transform. stackoverflow.com/questions/30128587/…
  
  – helb
  Mar 20 '18 at 12:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Possible duplicate of IOS Safari transition transform not working
  
  – adprocas
  Mar 20 '18 at 12:53
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Thank you @adpro! Yes, that does seem to work! I had tried: -webkit-transition: transform 200ms; I didn't realise it needed -webkit-transform
  
  – HMS
  Mar 20 '18 at 13:02
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Glad I could help. Even though the possible duplicate isn't exactly the same (without mention of Chrome) it is best to keep this question around and have it marked as duplicate so more people with your exact issue can find the solution. And welcome to stackoverflow.
  
  – adprocas
  Mar 20 '18 at 13:11
  

  
  
  
  

 | 
show 3 more comments

I'm trying to scale an image with css transition upon clicking some text.

The checkmark image should animate out and in each time the link is clicked. In iPhone Chrome however the checkmark doesn't animate - simply jumps from one state to the other, seemingly ignoring the css transition: transform 200ms.

It seems to work everywhere except iPhone Chrome browser - I've gone through everything as best as I can but it's totally stumped me!

Codepen link: https://codepen.io/anon/pen/oqBJzr

CSS:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

JavaScript:

function checkMarkAnim() 

 $('.checkmark').toggleClass('scale');

Any pointers on what has gone wrong would really help.

Thank you in advance

Update:

The suggestion to add -webkit-transition: -webkit-transform 200ms; does not seem to have resolved the problem (although I initially thought it had).

css-transitions css-transforms

share|improve this question

edited Mar 21 '18 at 10:41

HMS

asked Mar 20 '18 at 12:39

HMSHMS

185

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

function checkMarkAnim() 

 $('.checkmark').toggleClass('scale');

share|improve this question

edited Mar 21 '18 at 10:41

HMS

asked Mar 20 '18 at 12:39

HMSHMS

185

share|improve this question

edited Mar 21 '18 at 10:41

HMS

asked Mar 20 '18 at 12:39

HMSHMS

185

asked Mar 20 '18 at 12:39

HMSHMS

185

asked Mar 20 '18 at 12:39

HMSHMS

185

1 Answer
1

active

oldest

votes

0

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 -webkit-transition: -webkit-transform 200ms
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

share|improve this answer

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49384466%2fcss-transition-not-working-in-mobile-chrome%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 -webkit-transition: -webkit-transform 200ms
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

share|improve this answer

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

add a comment | 

0

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 -webkit-transition: -webkit-transform 200ms
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

share|improve this answer

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

add a comment | 

Please also add/keep -webkit-transition: transform 200ms;. So in the end you should have:

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 -webkit-transition: -webkit-transform 200ms
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

See it here working with mobile chrome (iOS): https://codepen.io/miikaeru/pen/aMXYEb

share|improve this answer

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

.checkmark 
 width: 35px;
 -webkit-transition: transform 200ms;
 -webkit-transition: -webkit-transform 200ms
 transition: all 200ms;


.checkmark.scale 
 -webkit-transform: scale(3);
 transform: scale(3);

share|improve this answer

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315

answered Mar 24 at 9:59

Michael MeisterMichael Meister

7315