Page transition won't load children until complete
I have a page I am transitioning on and off the screen like so
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;
However, on mobile safari the contents are not rendered until after the transition has completed. This issue does not occur in mobile Chrome or Desktop Safari
What is causing the content to not render until after the transition is complete? What steps can I take to ensure that they are rendered before the transition begins?
EDIT:
If I change the child container to position: fixed the render problem resolves but I am no longer able to scroll
reactjs mobile-safari
asked Nov 10 at 17:10
Luke Pighetti
33229
add a comment |
I have a page I am transitioning on and off the screen like so
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;
However, on mobile safari the contents are not rendered until after the transition has completed. This issue does not occur in mobile Chrome or Desktop Safari
What is causing the content to not render until after the transition is complete? What steps can I take to ensure that they are rendered before the transition begins?
EDIT:
If I change the child container to position: fixed the render problem resolves but I am no longer able to scroll
reactjs mobile-safari
asked Nov 10 at 17:10
Luke Pighetti
33229
add a comment |
I have a page I am transitioning on and off the screen like so
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;
However, on mobile safari the contents are not rendered until after the transition has completed. This issue does not occur in mobile Chrome or Desktop Safari
What is causing the content to not render until after the transition is complete? What steps can I take to ensure that they are rendered before the transition begins?
EDIT:
If I change the child container to position: fixed the render problem resolves but I am no longer able to scroll
reactjs mobile-safari
asked Nov 10 at 17:10
Luke Pighetti
33229
I have a page I am transitioning on and off the screen like so
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
transition: transform 500ms ease;
transform: translateY(${isOpen ? "0vh" : "100vh"});
z-index: 200;
However, on mobile safari the contents are not rendered until after the transition has completed. This issue does not occur in mobile Chrome or Desktop Safari
What is causing the content to not render until after the transition is complete? What steps can I take to ensure that they are rendered before the transition begins?
EDIT:
If I change the child container to position: fixed the render problem resolves but I am no longer able to scroll
reactjs mobile-safari
reactjs mobile-safari
asked Nov 10 at 17:10
Luke Pighetti
33229
asked Nov 10 at 17:10
Luke Pighetti
33229
edited Nov 10 at 17:26
asked Nov 10 at 17:10
Luke Pighetti
33229
asked Nov 10 at 17:10
Luke Pighetti
33229
asked Nov 10 at 17:10
Luke Pighetti
33229
33229
add a comment |
add a comment |
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%2f53241383%2fpage-transition-wont-load-children-until-complete%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53241383%2fpage-transition-wont-load-children-until-complete%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
