Currently trying to have a full screen popup in safari when the user has a small screen (e.g. Iphone 5). In chrome this works as expected but cant seem to figure out how to make this work on safari.
The idea is that the popup should take up the whole screen of the device and should only scroll with the content of the popup (so not the entire html document).
See the jsbin for full code.
As mentioned this works on chrome, not on safari for some reason...
I've scanned multiple articles and found that you need to apply the following to both body and html. This however doesn't solve the issue.
.no-overflow {
overflow: hidden;
position: relative;
height: 100vh;
}
I have also encountered this problem, And I found two ways to solve this err in the Google.
=============================================
the First Way:
edit css:
body {
position: relative;
overflow-y: hidden;
}
but this way in my environment did not work.
the Second Way:
edit css:
body {
position: fixed;
overflow-y: hidden;
}
but this way will upset the layout.
============================================
I started to trying other ways, and I found a solution with my team finally.
edit css:
body {
overflow: initial;
}
hidden-div {
overflow: hidden;
height: 100vh;
}
Related
I am doing some calculations with $(window).scrollTop();, element.innerHeight();, $(window).height();, element.offset().top;. And i've noticed that the result is different on mobile devices due to the toolbar from chrome and safari. My question is do any of those values change when the toolbar collapses and what can i do against it.
I had the same issue in the past, and solved it by setting the position as fixed for the body. Maybe that will help you as well.
html {
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
I found a very similar question here, also there is a jQuery.documentSize solution on github which detects the real width and height of the document.
Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?
Thanks!
My website: fanismahmalat.com
It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.
I added the following into CSS in the Chrome inspector and it fixed the issue:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.
The problem is in the image of the laptop that is exceeding in width.
https://i.stack.imgur.com/zlg6R.png
I'm looking at implementing the solution here:
http://luxiyalu.com/scrolling-on-overlay/
When I test out the demo in firefox (emulating mobile), everything seems to work.
When I try to implement into my site (which uses jquery mobile), the body underneath scrolls.
The way I am approaching it for now is:
<body>
<div class="overlay">
<div class="overlay-content">
put popup/overlay stuff here
</div>
</div>
<div class="background-content">
<div data-role="page">
put normal page stuff here
</div>
</div> <!-- background-content-->
</body>
Is there something that jquery mobile does that is causing the body to scroll? I'm surprised it works at all in the demo (without some type of fixed positioning for the body). But I only know a little CSS so it's hard for me to troubleshoot.
Thanks!
Edit 1:
Wow, i can be so stupid, now i know it's never a good idea to turn your brain off and copy-paste without looking at something.
The author's page had the CSS listed as:
.overlay{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
.overlay-content {
height: 100%;
overflow: scroll;
}
}
The brackets were messed-up and so the browser wasn't interpretting the css properly. Notice the close bracket for .overlay came after .overlay-content.
New Problem:
After fixing this, the overlay showed and scrolled until it hit the bottom of the overlay, then the body underneath picked-up the scrolling. Terence-Hill's answer actually fixed that issue for me for android's built-in browser. it stopped the body scrolling. however, the body scroll issue still seems to be occurring 1) ios safari 2) ios app using webview 3) android app using webview.
any clue why it would work in android default browser but not the other 3?
Try adding:
body:not(.hide-overlay) {
overflow: hidden;
}
if you want smooth scrolling on ios use:
.overlay {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
}
I have a problem hiding the scrollbar on my page but I still want to be able to scroll.
I know I can use
::-webkit-scrollbar {
display:none;
}
, but its obviously not working on Firefox or other non-webkit browsers.
Ive read a lot of threads explaining how can I accomplish this, but i just cant get it to work.
Can someone help me with this?
Website: http://test.6f.sk/
html {
overflow: -moz-scrollbars-none;
}
or any other element where you want to disable scrollbars
The best answer I know of is to just position the scrollbars out of view:
.crop {
width: 300px;
overflow-x: hidden;
}
.scroller {
width: 300px;
height: 200px;
overflow-y: scroll;
/* Must be ≥ scrollbar width. Scrollbar width varies by
* browser, OS, and config, so don't be precise, choose
* something wider than any scrollbar.
*/
padding-right: 50px;
}
<div class="crop">
<div class="scroller">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
</div>
</div>
Also worth noting that ::-webkit-scrollbar { display: none; } produces buggy behavior in Safari (current version 11.0.1) when used to hide a horizontal scrollbar on a page with an enabled Back button.
I just encountered a strange issue on ie11. I am trying to create a fixed element that will scroll along with window scroll.
$(window).scroll(function() {
var scrollY=$(this).scrollTop();
$('.myelem').css('transform', 'translateY(' + scrollY + 'px)');
});
I have also created a fiddle of this:
https://jsfiddle.net/fyngwnz6/1/
(This is for replicating the issue, I know this particular case could be solved with a fixed element)
The code works flawlessly with no performance issues on every browser, except ie11. When using the scrollbar 'myelem' element scrolls with just a small jitter which becomes more obvious when using the mouse wheel. However, where you can really see the issue is when using the scrollbar buttons. It seems like the render of the scrolling has to finish in order for js to track the scroll.
I saw that there were issues with ie11 and smooth scrolling, but this is not the case here. Is there any kind of solution to this? Am I missing something?
edit: although I have an answer that seems to solve the issue, actually what I am looking for is a solution to elements that have overflow:hidden applies on them and the scroll is taken from an overflown element rather than body scroll; a similar scenario can be found here:
http://www.fixedheadertable.com/
If 'fixed column' is enabled in the example, then clicking on the scrollbars shows the jerkiness in the movement.
It seems like adding height: 100%; and overflow: auto; to the html, body elements removes the IE 11 issue:
JsFiddle Demo
[Edit]: Adding margin: 0; removes double scrollbars.
for edge use:
/*Edge - works to 41.16299.402.0*/
#supports (-ms-ime-align:auto)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative;
}
}
/*Ie 10/11*/
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
position: relative
}
}