I've been using scrollIntoView to replace old jQuery animate. It works perfectly everywhere I need but Chrome Android.
The target element is inside an element with an overflow: auto;
The behavior expected is to scroll inside the overflowed element, but on Android, it will also scroll the documentElement even if html and body have an overflow: hidden;
I've made a codepen to reproduce the problem.
Did someone know a workaround?
Related
I am developing a site where I disabled regular scrolling simply using overflow: hidden; so the user has to click through the nav to interact with each part. I was testing the mobile view on an iphone X using safari and discovered you can bypass that using two finders to scroll. Is there a CSS or JavaScript workaround to disable that function?
Use overflow: clip instead of overflow: hidden;. As explained in MDN:
Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.
I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.
I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/
It seems I am having a strange issue in Chrome, with "width: 0px".
I am setting the width to 0, in order to partially hide a link. On mouseover I am displaying the link, with a simple animation.
While Firefox and Opera behave nicely, in Chrome I see the link's text displayed, even though the width is set to 0. (in IE and Safari I cannot test right now)
For your convenience, I added the code in a fiddle, here: http://jsfiddle.net/mihaidoru/yNzSH/
QUESTION: How can I make Chrome display the same thing as Firefox, CSS only, if possible.
NOTE: the menu should respect the CSS: "position: fixed; right: 0px".
Any help will be greatly appreciated.
Thank you.
Set the links to be overflow: hidden.
I have set the width to 1px instead of 0px. It makes it so that the green background appears and when you hover over it it expands as expected. I also changed it to 1px in your jQuery.
updated fiddle
You can use the css overflow property
overflow: hidden;
overflow: hidden does not work for me, try display:none; javascript reads ok.
I've got a popup dialogue which is just a div that's got display:none when not in use.
It works in most cases except for one scenario when another site displayed in an iframe manages to be shown on top of the div.
As the title says I've tried using z-index with no luck. It works in IE9, FF, Chrome and Safari. IE8, IE7 and IE6 all fail.
Any ideas of what could cause this or how it could be fixed would be great. I've been unable to recreate the problem on a small scale which is the reason why I'm unfortunately unable to provide sample code.
The only hunch I have is that it's related to resizing of the content inside the iframe but it's a hunch not verified.
It's difficult to tell for sure without seeing the code, but I suspect you're seeing this IE z-index bug
In Internet Explorer positioned elements generate a new stacking
context, starting with a z-index value of 0. Therefore z-index doesn't
work correctly.
The solution is to position (relative) the parent element of the popup and give it a high z-index:
<div id="parent" style=" position: relative; z-index: 9999;">
<div id="popup" style="z-index: 999;"></div>
</div>
The tricvk turned out to be to place an iframe of the same size on the same coordinates under the div.