I have a site that uses the scrollintoview plugin (https://github.com/litera/jquery-scrollintoview), but there is some sort of conflict going on with the CSS. I have a fiddle w/o CSS that works as expected and one with CSS that does not. Any ideas about what sort of properties I'm missing that are causing conflicts? There's more information in the info of the fiddles. Working (no CSS): http://jsfiddle.net/beej/vEGxg/1/ Non-working (w/ CSS): http://jsfiddle.net/beej/vEGxg/
NOTE: I only experience this in Chrome. All other browsers (IE8-9 and FF) seem to behave as expected, with the element scrolling into view.
In the non-working jsfiddle, remove the "position:absolute;" property near line #7 inside this CSS block:
.background {
position: absolute;
width: 100%;
background:#042F62 url(../images/bg.jpg) top center no-repeat
}
Related
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?
I am making a simple web page, but on google chrome it looks perfectly fine, just how I want, but when I open the page in IE or Edge the nav-pill tabs are at the top of the screen instead of near the middle like they are in chrome.
Images:
I have the 'top' property of the div that they are in is set to 30%.
I have a lot more code, but I don't want to flood this with it, If you need more info let me know! Thanks in advance!
#bodyArea
{
width: 425px;
position: relative;
top: 30%;
left: 44.3%;
}
After testing the code you showed us i noticed as well that it didn't work in IE. From here i would conclude the percentage from top for position:relative is incompatible with IE (judging from this: https://msdn.microsoft.com/en-us/library/ms531177(v=vs.85).aspx IE takes a percentage of the parent container and it might not know the height of the container of your div). I am afraid i can't be of more help without knowing more of the code around your div.
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 am using Nivo Slider, and am experiencing the "stacking" problem -- with all of the images initially loading on top of each other. I have tried the workaround for this problem described at http://nivo.dev7studios.com/support/ but this results in the images not displaying at all in IE. I have also tried the workaround of including "display:none" in the style tag but this has the same effect in IE. You can see the code, currently without the workaround, at http://www.rooftopdrinker.com. Any advice would be appreciated.
I believe something about IE's box model confuses the Nivo code.
Adding this CSS rule seems to fix it:
#slider { height: 355px; }