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/
Related
I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.
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 have a problem that the onHover state doesn't appear while the jQuery .cycle() plugin runs (tested on IE8, works fine in modern versions of Firefox and Chrome).
The site is located here: http://obh.co.il
The site is in Hebrew, but that shouldn't affect anything... When the slideshow images cycle, the red background on the drop-down menus doesn't appear (during its' onHover state).
Also, the image transition is a little laggy in IE, but perhaps that's just my computer not being good.
Could anyone find a possible solution?
Thanks!
Okay never mind, I found the solution. I had to apply the following IE-specific style to the sub-menu link anchors within the list items:
ul.sub-menu li a { filter: 0; }
I hope this can help someone out there.
Also, I'd love to hear a solution for the laggy transitions in IE8 if anyone's got any suggestions!
If you take a look at this site
the site is displayed fine in IE, FF, Chrome, however, if you look at it with Safari, it hides the site? Can't quite seem to figure out what's tricking this?
Change the z-index of <div id="bg-box"></div> to negative value;Now it is z-index: 1; Turned it to z-index: -1.I think it may work.
Doesn't in my Safari (up-to-date, SL)
It does show for a split second. All the elements in your divs are still there. Play around with your sizing and positioning. I have a good feeling that is messing it up.
your bg-box class has a z-index of 1. Your other classes have no z-index. In Safari no z-index is less than a z-index of 1 (sometimes). Set your other top level divs to have a z-index of 2 and it all looks fine.
I've developed a plugin that makes characters jump and bounce when moused over in any element that contains text.
Here is an example.
It works great in Firefox 3.5, Chrome, Safari 3.1 and IE7 (oddly, but in compatibility mode) but in IE8 it seems the characters disappear as they rise. I've added top padding to the p element, because it looked like they were being hidden from something like overflow: hidden, but they appear to rise a bit and then completely disappear, only to reappear on their way down.
Does anyone know what may be causing this?
Thank you very much Stackers!
Setting a line-height should fix it.