SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My images is moving/bad pixel when mouse hover

    Hi

    I have this website: http://oliver.kaspertoxvig.dk/
    But when you try to hover over an image at the frontpage, you can see that pixels move inside the image. Why does this happen?

    The same if you hover over the cart in the right corner (then the logo move).

    It do not happen when I remove:

    transition: opacity .20s ease-in-out;
    -moz-transition: opacity .20s ease-in-out;
    -webkit-transition: opacity .20s ease-in-out;
    }
    But I was wondering if there is a solution, so I still can use the ease-in-out effect, cause normally it works fine with ease-in-out.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Hi toxen! Your site is getting a PHP error at the moment.

  3. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry it works now :-)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    OK, I can't see a problem in Chrome. Could you explain in more detail what's going wrong, and what browser you are using?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There's a bug in Firefox with a pixel jog on transition/opacity when the image dimensions have been altered from the normal size.

    You can try this fix which should fix the issue.

    Code:
    ul.products li.product img,
    ul.products li.product img:hover{
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility:    hidden;
      backface-visibility:     hidden;
    }


Bookmarks

Posting Permissions

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