using jquery scroll on ie11 issues with jittery elements - javascript

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
}
}

Related

Does the value of window.scrolltop() change when toolbar/addressbar on mobile devices collapses

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.

How to remove extra white space from website when viewed on mobile browser

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

Safari won't let me full screen a popup with overflow hidden

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;
}

Hide scrollbar, but still be able to scroll on Firefox

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.

CSS body 100% height and overflow when necessary

I know how to ensure that the HTML body vertically stretches/shrinks to 100% height of the browser viewport (by having 100% height in the body and html rules).
I also know that normal HTML flow will result in containers vertically stretching to contain their contents (if things are set up properly).
Yet, I cannot seem to achieve both.
I.e. I cannot beat CSS into ensuring that when my page is viewed on a high resolution screen that it vertically stretches to leave no gaps AND to ensure that if my page is viewed on a lower resolution screen that the body stretches past the viewport (to accommodate all the content) and introduces scrollbars.
To me that is ideal behaviour and yet I sadly believe that this cannot be achieved purely in CSS. I know I can do this in JavaScript quite easily, but I want to be able to do it just in CSS.
Is it possible, or am I forced to use JavaScript?
Edit:
I have researched, tried and test so many techniques, but it just seems like it can't be done. Looks like I am going to have to go back to JavaScript.
OK so this definitely works for me:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
}
#wrapper {
width: 100%; /* Necessary because of side-effect of flex */
height: 100%;
}
Exactly what I tried before, but I thought I would give this new CSS feature "flex" a go and it has done the trick. So it looks the CSS managers/creators have finally addressed these critical issues with dynamic height and vertical centring.
I hope this helps someone else stuck on this issue.
You can use the min-height css property.
html, body {
min-height: 100%;
}
min-height: 100%; /* other browsers */
height: auto !important; /* other browsers */
height: 100%; /* IE6: treated as min-height*/
Taking inspiration from a question which seems to be pretty much the same as mine: Make body have 100% of the browser height
This is working for me:
html {
height: 100%;
}
body {
min-height: 100%;
}

Categories

Resources