- This topic is empty.
August 30, 2010 at 5:30 pm #30106sachaMember
I’ve been thinking about getting involved in this community for a while and now the site that I’m working on has given me the perfect excuse.
The site that I’m building is a single-page portfolio which scrolls vertically as you click links in the Nav.
So, first and the least important, I have a CSS transition on the Nav links so that when you mouse over the link fades to black and when you mouse off it fades back to light grey, the issue is for some reason on Chrome when the page loads it fades from a deep blue colour to the light grey, but I have no idea where the blue is coming from or why it’s fading on-load. I am new to CSS3 so maybe I’m just missing something simple. I’d like for it to start in it’s light grey colour when the page loads.
This is the code I’m using for the transition:
-webkit-transition: color 0.5s ease-in-out;
Next, again with Chrome, I am using a jQuery plug-in, I believe it’s called smooth-scroll, or something simular. The site had several fixed position elements (Header, Nav and Footer), my client has asked that the scroll bar be hidden so I have give the property overflow: hidden; to the body, which hides the scroll bar but causes a strange bug, when you click on a link and the page scrolls down the fixed position elements sort of paste themselves across the screen (when I comment out overflow: hidden; I do not get this bug).UPDATE: I’ve decided that this error can be attributed to the version of Chrome that I have running on my system (7.0.503.0 dev), please let me know if you get a simular bug running on a different version of Chrome.
Hopefully this is all clear, and I’d really appreciate and advice! Here is a link to the prototype site if being able to test the bugs will be helpful.
Oh! And any other advice would be great, any design/development tips for the site, it’s my first freelance project since I started studying Web Design + Development 12 months ago.August 31, 2010 at 3:39 pm #80852virtualParticipant
On Mac Chrome 5.0.375.127 the fadein/out effect works fine. In Firefox it does not, it is just a simple rollover. A suggestion, make the light grey a little darker, on one of my screens it is hard to even see it.
No problem on Chrome on PC either.
I could not see the problem with the maximised window in Firefox, but my screens are only 19″ at 1280×1024.
Just another couple of comments, the size of the text in the footer is tiny, it could be bigger especially since the headers are so huge. I would also resize them down a bit. Personally I find the blue tones a little too bright, I would tone them down a tad.
You are also redirecting the site for IE users to Firefox. I don’t think that is a good idea, you are going to make a large chunk of users unhappy by forcing them to download a different browser to view the site. While you can choose not to support IE6 as it is as old as the hills, I really think you should develop the site for IE7 and 8.August 31, 2010 at 4:23 pm #80843sachaMember
Thanks for getting back to me, I’m going to download the latest stable build of Chrome instead of using the dev build that I’m using (I don’t remember downloading the dev build though! Oh well.) I’ll definitely make the links a bit darker, thanks for the heads up. The fadein/out won’t work on FF as, as far as I know, CSS transitions are only supported by Webkit browsers (Chrome/Safari).
The footer text is indeed tiny, and will be changed. I’ll mess around with the blue, my client wants something bright, but I could probably tone it down.
Thank you for your advise and effort!October 14, 2010 at 11:08 pm #77949clintMember
Hey Sacha, I am having the same issue with Chrome loading links blue. I see it’s been a while since this post and looking at your link it appears you’re still having the problem.
It baffles me as its not happening to all of my links, only a few. I have not been able to isolate the issue and a simple test page with the following css (and different combinations of using shorthand styles vs longer declarations does not seem to have any different effect, eg the bug is not triggered)
-webkit-transition: color .5s linear;
-moz-transition: color .5s linear;
transition: color .5s linear;
It also does not appear to be a Webkit bug as Safari does not exhibit the behavior at all.August 7, 2012 at 9:44 am #107428joshuanhibbertMember
Saw this issue again today. Would like to be able to solve it.
- The forum ‘CSS’ is closed to new topics and replies.