CSS Transitions Behaving Differently on Chrome for iOS Devices
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
css web mobile css-transitions css-animations
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
add a comment |
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
css web mobile css-transitions css-animations
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
add a comment |
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
css web mobile css-transitions css-animations
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
css web mobile css-transitions css-animations
css web mobile css-transitions css-animations
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
edited Dec 2 '18 at 2:30
shenk
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
asked Nov 21 '18 at 16:42
shenkshenk
1,0981959
1,0981959
add a comment |
add a comment |
0
active
oldest
votes
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416800%2fcss-transitions-behaving-differently-on-chrome-for-ios-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416800%2fcss-transitions-behaving-differently-on-chrome-for-ios-devices%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
