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;
}
Related
I am trying to create a scroll box whereby I can alter the shape and colors of the arrows and also the background of the text area.
I am trying to create the same scroll box as the followings but to no avail.
You can style Chrome, Opera and IE's scrollbars. Unfortunately, Firefox doesn't support it.
Moreover, each browser engine uses its own prefixes and properties to style the scrollbars, some offer more than others.
WebKit example:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: grey;
}
::-webkit-scrollbar-thumb {
background: black;
}
There are plenty of resources online about styling the scrollbars.
Bottom line is:
if you want 100% browser compatibility, use a JavaScript solution (google for "jquery scrollbars").
Great question!
As the other answers state the main scrollbars are styled and handled by the browser so this is not something you would achieve universally in all browsers.
However having said that there is a great resource here to help with this, its not going to produce exactly what you asked for but it will give you some cool scrollbars.
Every browser handles scrollbars with their own styling so changing them and making them look universally the same across browsers is very difficult. I know this is accomplishable with javascript but I'm not able to point you in the right direction of where to start with that.
I've been trying to format the appearance of the RSS button in css, and for some reason there's a big difference between browsers. Chrome renders it perfectly, as if I don't need to mess with it at all. But on Firefox and IE9, it is uneven with the rest of the menu. So I added padding to even it out, and to elongate the hover colour to the bottom of the menu bar. That fixes the issue on Firefox, but it makes the menu uneven in the opposite way on Chrome. Suddenly the bar is too long for the other menu items.
.menunav a {
padding-right: 6px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 6px;
font-size: 100%;
}
.menunav-rss:hover {
background: #ff6600;
font-size: 100%;
padding-top: 3px;
padding-bottom:3px;
}
This is coming from a wordpress site. I'm quite new to css or coding, so I'm not entirely sure how to amend this. Fixing one seems to make the other worse, and I'm not sure why only the rss button is uneven.
For reference, this is what the menubar appears without any padding on both Firefox and Chrome.
Any help would be appreciated. If you need more information, I can easily give it.
Its due to browsers having different "preset" values. Think of it as each browser having their own stylesheet that gets applied before yours.
The only workaround really is to use a CSS reset. Eric Mayers is considered to be the 'goto' one, and covers pretty much everything you'd want it to.
Simply load the reset before your own styles, and then you should be able to adjust everything to look more or less the same across all browsers.
It's a bit of a pain to have to do it, but you shouldnt really rely on the browser's built in default styling.
I've run into the same issue multiple times. I've found that setting vertical-align: top makes it look the same in both FF and chrome (probably IE9 as well, although I haven't tested that), after which you can add padding-top to position the text within the anchor exactly where you want it.
There's this odd IE issue that has been twisting my mind. It works correct in other browsers (Chrome / Firefox).
For those that want to dive directly in the code, here's a Fiddle. Important parts:
HTML:
MyButton
CSS:
.btn {
display:block; width:135px; height:58px; text-indent: -9999px;
background-image:url("http://i47.tinypic.com/e7f4w6.png");
}
.btn:hover { background-position:bottom; }
In the Fiddle I've added an arrow to display the correct "center" of the image. As you can see, this is just a simple image sprite for navigation. The height of the image is double the height of the actual button, so we can apply the background-position:bottom .
But for some reason, when hovering, IE doesn't display the image correctly. Somehow the arrow (black line) and the center line (red line in the hover state) don't align anymore:
Normal state:
Hover state:
Because the line "jumps", the text also jumps (hardly noticeable in my example, but on my project you see it pretty good). Tested & occurs with IE9 and below on Win7.
I hope you might have a solution for this little brain teaser!
The comments from jQuerybeast, Miguel-F & Billy Moat above pushed me to another direction (thanks folks!), and I tried to open my Fiddle on another machine. Same browser, same OS & it was working fine.
After some further investigation, I found out it was my screen resolution and/or video display and/or taskbar that caused the strange effect. This would mean my code is correct, but somehow IE draws some pixels wrong on the screen (where other browsers do this correct). But this might be a whole new question.
Once again, thanks for the help!
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.
I'm having a problem with border-radius on Chrome (latest build). I have a border-radius: 10px; on the slider frame from this page: http://next.lab501.ro/
In Firefox and IE9 everything works, but not on Chrome and I can't figure it out why, because I have other elements with border-radius that work just fine in Chrome.
I've checked using Safari's "Web Inspector", and your CSS is definitely being successfully applied to your container.
I think the problem is related to the contained content of an element with border-radius "breaking out" over the container's rounded corners. See this article for more background. I believe the problem was first properly reported by Richard Rutter.
In your case, you are already using overflow: hidden on the container, and that's not working -- this may be related to the z-indexes you've got going, but it's hard to tell with such a complex example.
I would try rounding the corners of the contained elements that appear to be overflowing, though. This seems to work for me on that page:
dl.slidedeck {
border-radius: 10px;
}
div.sd-node.sd-node-caption {
border-radius: 10px;
}