I have a problem with this site: www.manniche.com.
In the slider, when you hover over it, some arrows appears so you can skip to the next slide. In Safari on OS X Yosemite, the arrows appears on top of the fixed menu, if you have scrolled down a bit, and this doesn't look great. It works fine in Chrome and Firefox.
The arrows have a z-index of 100, while the header have a z-index of 200.
Is this a general Safari issue, or can I somehow overrule it, so the arrows does not apper on top of the menu, but still on top of the slider?
I am using the Revolution Slider Plugin and Wordpress, for the site.
I had the same issue and had to add the styling in manually. My arrows were 80px high so it was:
#slider-wrapper { position: relative; }
.tp-rightarrow,
.tp-leftarrow {
top: 50% !important;
margin-top: -40px !important;
}
That did the trick nicely.
You should update to the latest version of the slider. z-index and also transform z issues are solved in the current version. Just rechecked and in 4.6.4 there are no issues like that any more.
Also it is a good idea to contact ThemePunch by following the link http://themepunch.com/support-center where you get a direct answer within a day !
Related
I have an issue which I've tried to resolve for several hours now.
There is a fixed element on my site for the menu, sticks to the top of the webpage with no margin or spacing above it.
Works great on firefox, chrome, but on Safari about half of the menu is cut off from the top of the page.
Website: uprighthealth.com
Chrome:
chrome - working
Safari:
safari - broken
Currently I have the issue patched with a browser specific fix but I know that's not solving the real issue. To see whats happening just disable the 2 browser specific styles under id="nav-container" and id="header" in safari
Any help would be GREATLY appreciated!
add top/left positions to fixed element:
div#nav-container {
position: fixed;
top: 0;
left: 0;
}
I'm learning how to use the Skrollr.js library. Awesome cool tool on using the scroll bar in the DOM to manipulate the appearance of a web site. It does have a bit of a steep learning curve to understand exactly how it works. I'm playing with a simple sample. I have an image that I want to stay on screen in the background for 500% of vertical height. I have other text items that I want to scroll in the foreground. I wanted to do a test and have one of the text items fade to zero.
helpful references: Classic Parallax Scrolling Example, and I Hate Tomatoes Example
I've got an image in a div loaded in a position: fixed; location, and a few divs in the scrolling area below <div id="skrollr-body"> I have a text header that I wanted to fade to zero as I use the scroll bar. Note: I started skrollr.init() without any arguments. Also, I am not using jQuery at all.
My problem is it works erratically on Chrome, and works just fine on Firefox browser. I'm at a loss to figure out why?
I've created a jsFiddle to exhibit the issue. http://jsfiddle.net/q3z3v6op/4/ Fiddle works the same as my test program; Flaky on Chrome, okay on Firefox. When looking in the Chrome dev tools, you can easily see that the red box text opacity value is changing correctly to zero as the box goes towards the top of the display, but the actual display doesn't fade most of the time. I can get it to work if I go to the Chrome Dev tools, open up the drawer (where the console / search / emulation / rendering tab is), then select 'rendering' and click on [ ] Enable Continuous Page Repainting.
Anybody else been here? Any ideas what's going on with this issue? Many thanks.
I updated your fiddle. This is a little bit of a different approach, but it should be more cross browser compatible. I guess Chrome does not like display: block and opacity: 0. This looks like a bug. I tested in on Safari (which is also WebKit) and it does not have a problem. By using inline-block I was able to fix the bug on Chrome.
http://jsfiddle.net/christianjuth/q3z3v6op/5/
Fixed code:
.hsContent {
display: inline-block;
position: absolute;
left: 50%;
width: 400px;
margin-left: calc(-200px - 8%);
color: #ebebeb;
padding: 0% 8%;
text-align: center;
}
In the given site below, I have a sidebar menu with CSS positioning fixed. However, when I scroll, the menu seems to lag behind. This behavior seems to repeat itself with the image below it.
I've tested the site on IE and everything's working as expected. I have a feeling it's the embedded object behind the menu causing the problem - But CSS fixed positioning should work regardless no? Looking for suggestions or fixes to this issue.
I'm using Chrome 39.0.2171.65, on Windows 7 Ultimate N x64
Image of behavior
SITE LOCATION
Ok, so the problem was with your object, but exact problem - with css rule "z-index: -1"
I made following changes in developer tool
1) Put your object after all site content
2) Add to your object css left: 0 and z-index: 0
3) Add to block .left and .wrapper styles - position: relative and z-index: 1
And after this changes - it looks fine in my Chrome. Hope it helps
Using one of jquery plungin to display as Flyout styles menu.
Please check http://jsfiddle.net/bNj4R/
It's so strange in Safari browser, when you click a top level menu from fifth top, It does not showing any children menus.
I found It's something do with following css in jqueryUI.css
.ui-helper-clearfix:before, .ui-helper-clearfix:after {
content: "";
display: table;
border-collapse: collapse;
}
.ui-helper-clearfix:after {
clear: both;
}
It's all working great in other browsers. expect safari.
Please check http://jsfiddle.net/bNj4R/
Fixed , Forced to make a scroll to top. before display sub menus.
$('.fg-menu.fg-menu-scroll').scrollTop('0');
Thanks for your advice :)
Looks like safari isn't scrolling the box to the top again. That's the reason why the first 5 work and the rest don't. Once you scroll, Safari keeps that position when it brings up the submenu.
I think it's possibly a bug with fgMenu library. Looking at the lirbary, it's 5 years old and it's pretty hefty in size. Might be worth having a hunt around for a more current menu library. Can do a bunch of things with css these days.
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.