CSS - overflow scroll not always working in iOS webview
I have got 2 <div> as parent and child layers that work as a context (context only, no block-style elements included) display within a container that has scroll ability.
So parent container layer has:
#parent{
position: absolute;
top: 0;
left: 40px;
right: 40px;
width: calc(100% - 80px);
height: calc(100% - 40px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
and a child context layer has:
#child{
width: 100%;
}
Then there was a js context reader that gets a large amount of paragraphs text and insert into child context layer.
The height of child context layer in definite exceeded parent layer, so the scroll should work.
And it has been tested and confirmed working in several browsers(major in chrome because of the debug) on PC.
My final goal is to use the HTML5 UI in WKWebview component that sits in iOS App. And the problem appeared:
- The scroll is not working here, and
- a connect-test in iOS Safari with Mac OS showed the same problem
I did solve the problem with a delay apply of overflow: scroll in way of setTimeout with addClass.
But I still would like to know if overflow: scroll property only works against:
- any static status element before page loaded(
window.onloador child must have a larger height initially for scroll to work) is completed? - any dynamically insert of block-style under layer with scroll property?
html css scroll overflow
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
add a comment |
I have got 2 <div> as parent and child layers that work as a context (context only, no block-style elements included) display within a container that has scroll ability.
So parent container layer has:
#parent{
position: absolute;
top: 0;
left: 40px;
right: 40px;
width: calc(100% - 80px);
height: calc(100% - 40px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
and a child context layer has:
#child{
width: 100%;
}
Then there was a js context reader that gets a large amount of paragraphs text and insert into child context layer.
The height of child context layer in definite exceeded parent layer, so the scroll should work.
And it has been tested and confirmed working in several browsers(major in chrome because of the debug) on PC.
My final goal is to use the HTML5 UI in WKWebview component that sits in iOS App. And the problem appeared:
- The scroll is not working here, and
- a connect-test in iOS Safari with Mac OS showed the same problem
I did solve the problem with a delay apply of overflow: scroll in way of setTimeout with addClass.
But I still would like to know if overflow: scroll property only works against:
- any static status element before page loaded(
window.onloador child must have a larger height initially for scroll to work) is completed? - any dynamically insert of block-style under layer with scroll property?
html css scroll overflow
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
add a comment |
I have got 2 <div> as parent and child layers that work as a context (context only, no block-style elements included) display within a container that has scroll ability.
So parent container layer has:
#parent{
position: absolute;
top: 0;
left: 40px;
right: 40px;
width: calc(100% - 80px);
height: calc(100% - 40px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
and a child context layer has:
#child{
width: 100%;
}
Then there was a js context reader that gets a large amount of paragraphs text and insert into child context layer.
The height of child context layer in definite exceeded parent layer, so the scroll should work.
And it has been tested and confirmed working in several browsers(major in chrome because of the debug) on PC.
My final goal is to use the HTML5 UI in WKWebview component that sits in iOS App. And the problem appeared:
- The scroll is not working here, and
- a connect-test in iOS Safari with Mac OS showed the same problem
I did solve the problem with a delay apply of overflow: scroll in way of setTimeout with addClass.
But I still would like to know if overflow: scroll property only works against:
- any static status element before page loaded(
window.onloador child must have a larger height initially for scroll to work) is completed? - any dynamically insert of block-style under layer with scroll property?
html css scroll overflow
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
I have got 2 <div> as parent and child layers that work as a context (context only, no block-style elements included) display within a container that has scroll ability.
So parent container layer has:
#parent{
position: absolute;
top: 0;
left: 40px;
right: 40px;
width: calc(100% - 80px);
height: calc(100% - 40px);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
and a child context layer has:
#child{
width: 100%;
}
Then there was a js context reader that gets a large amount of paragraphs text and insert into child context layer.
The height of child context layer in definite exceeded parent layer, so the scroll should work.
And it has been tested and confirmed working in several browsers(major in chrome because of the debug) on PC.
My final goal is to use the HTML5 UI in WKWebview component that sits in iOS App. And the problem appeared:
- The scroll is not working here, and
- a connect-test in iOS Safari with Mac OS showed the same problem
I did solve the problem with a delay apply of overflow: scroll in way of setTimeout with addClass.
But I still would like to know if overflow: scroll property only works against:
- any static status element before page loaded(
window.onloador child must have a larger height initially for scroll to work) is completed? - any dynamically insert of block-style under layer with scroll property?
html css scroll overflow
html css scroll overflow
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
asked Nov 23 '18 at 18:26
DeadlYBlinderDeadlYBlinder
12
12
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%2f53451452%2fcss-overflow-scroll-not-always-working-in-ios-webview%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%2f53451452%2fcss-overflow-scroll-not-always-working-in-ios-webview%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
