1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image disappears during transition in Google Chrome

Discussion in 'CSS' started by Reinards, Jul 5, 2017.

  1. #1
    I have this very annoying thing in Google Chrome.
    I have a grid in my page that looks like Pinterest's one, but it is made using only CSS.
    http://imgur.com/a/M7dtI

    I have one div that has all those column count properties etc.
    In that div there are "pin" divs which correspond to each individual image or "pin".
    And inside that div there is an img tag.

    When I didn't apply any hover effects to the img tag, everything was fine.
    I tried many effects:
    scaling, moving using translate, changing width, height, rotation and filter.

    But when any of mentioned effects if applied and I hover over an image(The middle one for example), it disappears. It is still there when I look in the inspector code, but I can't see it. (http://imgur.com/a/mYVRd)

    I tried the same in Mozilla firefox and there were no weird behaviors.
    SEMrush
    Could there be fault in my code or it is just my browsers response?
     
    Reinards, Jul 5, 2017 IP
    SEMrush
  2. Reinards

    Reinards Greenhorn

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #2
    I should use Google a little bit more.
    I am sorry for asking questions without spending at least 30 minutes searching for the answer.
    I will be more careful next time!

    If anyone is having the same bug as I do, this is the answer:

    This is Chrome bug that sometimes appears for some reason. All absolute-positioned elements inside hardware-accelerated container (e.g. slides) must have rsAbsoluteEl class, or just such css styles to force hw acceleration on element that blinks:

    That text is from one website.

    You must use these property (Should fix the bug):
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
     
    Reinards, Jul 5, 2017 IP