img flickering on css picture wall

Question

im doing this project for university. i'm currently facing a minor problem but yet disturbing.

link to site: http://haw.finekost.com/ws2013/PP_HATE_SITE/

CSS:

.box {
    filter: grayscale(1);
    float: left;
    height: 0;
    margin: 0;
    moz-filter: grayscale(1);
    ms-filter: grayscale(1);
    o-filter: grayscale(1);
    opacity: 0.5;
    padding-bottom: 20%;
    position: relative;
    webkit-filter: grayscale(1);
    width: 20%;
}

.box:hover {
    cursor: pointer;
    moz-filter: all .5s ease-in-out;
    opacity: 1;
    webkit-filter: grayscale(0);
    webkit-transition: all .5s ease-in-out;
}

img {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

the boxes are generated via php. the image boxes change in size (just 1px) when i hover them. i really dont know why they do it. Hopefully someone can help me

In Firefox on OSX they don't actually, in Chrome they do – Bas van Dijk Dec 20 '13 at 19:29 — Bas van Dijk, Dec 20 '13 at 19:29

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

it appears to be related to the webkit transition filter in your .box:hover

Maybe this will help? Prevent flicker on webkit-transition of webkit-transform

actually if you add -webkit-backface-visibility: hidden; to the box:hover css it appears this will fix the problem.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 20 '13 at 19:36

DirtyKalb

145
1
9

score 0 · Answer 2 · answered Dec 20 '13 at 19:37

0

It is happening due to your webkit-transition style rule setup on your box:hover selector.

If you take it out, then there is no 'flicker'. THe reason it does not happen in Firefox is because you do not have a firefox vendor property set there such as -moz-transition.

Why do you need a transition in this case ?

answered Dec 20 '13 at 19:37

Parijat Kalia

4,929
10
50
77

oh and if you do need the webkit transition to gracefully transition into the hovered over picture. The remove 'all', it should work fine. – Parijat Kalia Dec 20 '13 at 19:39

Bas van Dijk · Answer 3 · 2013-12-20T19:46:38.560

In your website you use for .box a width of 20%. It looks like this causes somehow a 1px gap. However this could be solved by using width: 20vw for .box. vw is viewport width in % this removed the 1px border.

So use:

.box {
    filter: grayscale(1);
    float: left;
    height: 0;
    margin: 0;
    moz-filter: grayscale(1);
    ms-filter: grayscale(1);
    o-filter: grayscale(1);
    opacity: 0.5;
    position: relative;
    webkit-filter: grayscale(1);
    padding-bottom: 20vw;
    width: 20vw;
}

img flickering on css picture wall

3 Answers3