Results 1 to 2 of 2

Thread: image hover transitions and browser compatibility

  1. #1
    Join Date
    Oct 2013

    image hover transitions and browser compatibility

    Hey guys,

    so I have this problem with my hover images.
    I want to get rid of the initial flicker as they load. But since I got a transition on them, I cannot use sprites. I also tried placing the images in html (and hiding them) but that doesn't work either. I didn't even expect this to happen, because I use an image proloading script.

    Also, when I test the website in IE and Firefox, the transition (on logo and the arrow at the bottom) doesn't work.
    Another problem is when I put 'margin: auto' on the logo, in Firefox it ignores the margin-top: 40px so the logo is right at the top of the site. But when I don't include margin: auto, the logo isn't centered in IE. I don't know how to deal with this browser compatibility BS, because there is no way of using vendor prefixes on things like margin.

    Here's the whole code as a file, since it is quite long:

    To sum it up, I need to:
    1. fix the flickering of the images the first time I hover over them
    2. 'enable' transitions in other browsers.
    3. fix the position of the logo, as I described above.

    I'd really appreciate any help, because I want to get this done finally, but there's always something that comes in the way.
    Thank you

  2. #2
    Join Date
    Mar 2007
    Use an image preload method that will load the image in background and then the image is available for use when needed. When you do that then your other issues should be fixed.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center