Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 bugs? Any ideas?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #30106
    sacha
    Member

    Hi there,

    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.

    Currently I’m having three issues, two of which I believe are CSS related and one which is Javascript related. In fact, one of them may be an issue with the Javascript or with the CSS not sure, hopefully someone here will have some ideas!

    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;
    -webkit-transition-property: color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;

    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.

    Lastly, something that I imagine is more of a Javascript issue, but could be wrong, I am developing on a 24″ iMac and when testing the page in Firefox I noticed that if I maximise the window the site is unable to scroll down to the last section when I click the link. If I make the window around 200px shorter it scrolls to the bottom fine. Any ideas?

    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.

    Thanks!

    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.

    #80852
    virtual
    Participant

    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.

    #80843
    sacha
    Member

    Hi virtual,

    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).

    I’m not sure why I attributed the Javascript scrolling error solely to FF, as far as I can tell it effects all major browsers, it’s going to be something in the Javascript, I’ll have a dig through.

    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.

    The redirecting of IE users is for two reasons, 1. me messing around with javascript trying to figure out how to do it and 2. a temporary measure while I finish my final project at college. As much as I’d like to ignore Internet Explorer completely, I do understand there is a need to support those users, and will update the site accordingly. (I might add an alert/suggestion box to encourage them to upgrade to a modern browser, if possible.)

    Thank you for your advise and effort!

    #77949
    clint
    Member

    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)


    a:link,
    a:visited {
    color: #000;
    -webkit-transition: color .5s linear;
    -moz-transition: color .5s linear;
    transition: color .5s linear;
    }

    a:hover {
    color: #888;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
    }

    It also does not appear to be a Webkit bug as Safari does not exhibit the behavior at all.

    #107428

    Bump.

    Saw this issue again today. Would like to be able to solve it.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.