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.
Related
I have a one-page website and I've added some sections with big background images set on them. I wanted them to have a "fixed" effect so when user scrolls they don't move. So I used background-size: cover; and background-attachment: fixed. This does the job. The problem however, is it's extremely laggy in Chrome, I think chrome doesn't cache images or something. You can test it here:
http://jsfiddle.net/sallar/rwyfZ/1/
its not smooth like other browsers. So I tried using images (in this case using $.backstretch). Using this method the scrolling lag is fixed and scrolls very smoothly, but it doesn't have the "fixed" effect I wanted. So I thought I should use a parallax effect. But none of the parallax plugins or methods I tried did a good a job on "images", they were all optimized for background-image which I can't use because of that problem in Chrome.
Here is a demo of Backstretch example:
http://jsfiddle.net/sallar/FX4Cn/1/
So, What should I do to make them have a fixed style and make the page scroll smoothly like the second example?
Thanks in advance.
I cant see any big difference except that the second one isnt fixed for sure.
I think your "issue" is that Chrome scrolls in steps, what Firefox and Opera dont (i dont really know about the others atm). Next time you may try to google something like "smooth scrolling chrome" to see one of hundrets questions and solutions for this "problem".
It theoretically is possible to do this with Javascript, but i cant find any useful/working example atm.
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/
I have a few sibling images that are absolutely positioned at top:0 and left:0 relative to their parent div. By default, the last image is on top. I am using jQuery to fade the images one at a time by animating to opacity:0 starting with the upper most image "the last image in the parent div". For some reason the animation looks smooth in firefox and chrome, but not safari? What are some reasons why this might be happening? Thanks in advance.
Are you sure it is the animations fault? I have had a case where using box-shadow:inset... and -webkit-box-shadow:inset... caused safari to lag. If you CAN isolate it to jQuery, then I'm not sure what's going on. Do you use cycle?
I don't know off hand how jQuery handles opacity in Safari. If it's not using the webkit CSS properties, then that could be the reason. The webkit CSS properties for opacity are going to perform better.
OK, so I'm working on a redesign and we've got most of our cross-browser CSS compatibility bugs worked out - except for a glaring one with ie7.
The issue is that we are using a JavaScript for a navigational menu drop down. In all browsers except the noted culprit everything functions as expected.
However, in IE7 I'm getting the drop down appearing behind my other page elements, as though the z-index was set to something negative. But I do in fact have a CSS rule applied that sets this element to a z-index of 4000, and used that rule to correct the same issue on modern browsers.
For some reasons IE7 isn't recognizing the rule. Does IE7 not support this CSS rule?? If not, any suggestions for how to resolve it for IE7? A JavaScript solution?
Here's the page in question: http://betawww.helpcurenow.org/
Thanks!
OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.
I also ran into this problem, but assigning a high z-index to the containing element (menu) did not resolve the problem in itself. I had to add position: relative to push it in front of the stubborn script (of course, assigning z-index: 0 to the image script).
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.
This could be part of the problem, if you need a JS solution, you might look into the following project:
http://code.google.com/p/ie7-js/
OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.
This is very useful. Thank you so much.
Put your menu in a new DIV and give z-index (greater value) to that DIV.
I had this problem and I put this code in the page(s) with the issues and it solved it. Just replace div with whatever the element is.
<script>$(function() {
var zIndexNumber = 1000;
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>
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.