Strange Hover effect on image ....

edited March 2015 in Style Development Firefox
I write an userstyles for :
ffffl*ckr?, a Flickr viewer.

Here the old Userstyles which caused this problem (in PasteBin) :
FLICKR (Viewer) - FFFLCKR (fffflckr) v.2 (new2)

Here the working version :
Flickr WideScreen (Viewer) - FFFLCKR (fffflckr)

I observe a strange thing :
when i mouse hover some shots (not all, only some small are affected) , they became a little blurry (like an optimize effect ) and stretch a bit.

On firebug i see nothing which can explain that.

An idea ?

image

Comments

  • Does it happen with the style disabled?
  • edited March 2015 Firefox
    no, that's happens only with the style...
  • It's not an "effect" or something "strange". The image is just stretched vertically, that's why it becomes blurry. There must be some rule that causes that, either in your custom style or a leftover from the original site rules.

  • edited March 2015 Firefox
    Thanks ...

    I try many ideas, but experiencing always the same problem.

    So, that's always strange for me
    :-)

    If (with Firebug) i resize vertically a thumbnail affected by the "problem on hover", it don't became blurry.
    That's why i think about a filter effect.

    Yes , "The image is just stretched vertically" :
    but why some of them and not all ?
    And i see some big thumbnails affected too.

    I try to see (with my poor knowledge about scripts) if some scripts enable with the site can explain that, but without chance.

    What sort of tool i need to use to dynamically observe the change on hover if i can't see explanation with firebug ?

    In an other side, maybe it should be better to rewrite all the style from scratch ....

    ;-)
  • edited March 2015 Firefox
    This is a Firefox bug/feature. With your changes, the image shifts down about 1/4 pixel on hover. If that's far enough to convince the browser to move the image lower [1], Chrome simply redraws the same image 1 pixel lower, while Firefox tries to render it a fraction of a pixel lower by means of an SVG transform (or some other subpixel rendering magic).

    In Chrome the affected images simply move down one pixel on hover. In Firefox each display pixel becomes a composite of the neighboring pixels in the unshifted, pixel-aligned image, which (1) blurs the shifted image and (2) renders it 1px taller because the image that was N+fraction display pixels high and thus contributed to N+1 rendered pixels is now fraction+N+fraction display pixels high and contributes to N+2 rendered pixels. [2]

    In your style the image moves down 0.275px on hover:
    <div class="photo">
    <div class="over-nav">Edit controls</div>
    <img style="width: 100%; height: auto;">
    <!-- On hover, move IMG *above* .over-nav via margin-top -->
    </div>

    .photo { width: 197.5px }

    .photo .over-nav {
    margin-top: -22%; /* 197.5px x -22% = -43.45px */
    height: 0px;
    border: none;
    } /* bottom: -43.45px + 0px + 0px */
    .photo IMG { margin-top: 0 } /* top: 0px <<< */

    .photo:hover .over-nav {
    margin-top: 135%; /* 197.5px x 135% = 266.625px */
    height: 20px;
    border-width: 1px;
    } /* bottom: 266.625px + 20px + 2*1px */
    .photo:hover IMG {
    margin-top: -146%; /* 197.5px x -146% = -288.35px */
    } /* top: 288.625px -288.35px = 0.275px <<< */
    If the (resized) image is N+fraction pixels high, and if fraction < 0.5 < fraction + 0.275, then the browser will reposition the image on hover, and in Firefox the image will be smudged.

    To avoid this "feature", move the images an integral number of pixels (or don't move them at all).
    ...
    .photo:hover .over-nav {
    ...
    height: calc(197.5px * (1.46 - 1.35));
    box-sizing: border-box;
    } /* bottom: 266.625px + 21.725px = 288.35px */
    .photo:hover IMG {...} /* top: 288.35px -288.35px = 0px <<< */
    ...
    Remember that margin-height: 22% is 22% of the container width, not height; if you want to use relative units here, em is a better choice. It may be easier to absolutely position .over-nav within .photo.

    [1] Specifically, if the top half of the pixels in the next display row are covered by the bottom edge of the repositioned image, Chrome will move the image and Firefox will redisplay it.

    [2] Well, almost. The details depend on how browsers make page reflow finish quickly. When the browser reflows (part of) a page it starts in the upper-left corner and works from top to bottom and from left to right looking for layout changes. Suppose a 332w x 500h image was originally resized to 197.5w x 297.44h and rendered as 198w x 297h, and now it has moved down by 0.3px, which triggers a reflow.

    When Chrome reaches the image, it sees that the top edge has moved from something.0px to something.3px, rounds the value to the nearest pixel, and decides that, for the purpose of reflow, the image hasn't moved. It then sees that the bottom edge has moved from something.44px to something.74px, rounds to the nearest pixel, and decides to move the rendered image. It wants to finish quickly, so it simply copies each rendered row of pixels to the following row of the new bitmap. Every pixel of the image is displayed 1px lower in the new rendered bitmap.

    When Firefox reaches the image, it too sees that the top edge of the resized image is now 0.3px below the top edge of the display row, but it wants to be more clever than Chrome, so it leaves 70% of the pixel intensity in the same display row and adds 30% of the intensity to the following row of the new bitmap. This way the visual "center" of the pixel moves 0.3px down instead of jumping by a full pixel as in Chrome, and Firefox can do it row by row so it's just as quick as Chrome at reflow. Now though each original row of pixels bleeds a little into the next row, and some of the last rendered row of the original image bleeds into the row that follows it so the image appears 1px taller than it was.
    wOxxOm said:

    It's not an "effect" or something "strange". The image is just stretched vertically, that's why it becomes blurry.

    Bachelierus
    "Mihi a docto doctore
    Demandatur causam et rationem quare
    Opium facit dormire.
    A quoi respondeo,
    Quia est in eo
    Vertus dormitiva,
    Cujus est natura
    Sensus assoupire."

    Chorus
    "Bene, bene, bene, bene respondere.
    Dignus, dignus est intrare
    In nostro docto corpore.
    Bene, bene respondere."
  • edited March 2015 Firefox
    Hahah always a big Guru helph with you Hideheader!

    Thanks :
    I need to learn much thing by your fault!
    ;-)
    I can't imagine where you find all these infos....
    and the time to answer so precisely to a post like mine.
    A Guru , yes ...

    Now i try to correct my style.
  • edited March 2015 Firefox
    You give me an idea:

    I wanted move the Icon container on hover but, if understand that you say, that's produce this bad effect - (or don't move them at all)....

    So i use:
    transform: translateY(XXpx) to move things like i wanted without problem.

    Translate is useful here :
    the actual space on the page that the element occupies remains the same as before transition.

    Maybe dirty , but it work....

  • edited March 2015 Firefox
    decembre said:

    I can't imagine where you find all these infos....

    In this case, from you. Remember this?
    https://forum.userstyles.org/discussion/43816/problem-with-border-radius-on-firefox

    You can clearly see the left-to-right, top-to-bottom bias in your original screenshot. Also here:
    https://forum.userstyles.org/discussion/34808/border-anomaly

    Basically, when you make a small change to the layout, such as the :hover change in your style, a browser will use a shortcut if it can to avoid recalculating the layout for the entire page. Usually the shortcut is good enough, but sometimes there is artifact.
    decembre said:

    Maybe dirty , but it work....

    Any solution that works is a good solution.
  • edited March 2015 Firefox
    "Any solution that works is a good solution. "

    Yes, but the "translate" solution was not....
    with it , the stretch was provided horizontally:
    Pffff...

    Now i have found another way to do that i expected without it.
    And sorry, i can't understand why now it's good ( Good : for now, only for Big Screen)
    ;-)

    Sometime CSS are hard to understand.

    Anyway, thanks for the help, it's great to have your eye on our test.
  • check this one...CSS Hover Effects

    Ling
  • Waterfox
    lingmaaki said:

    check this one...CSS Hover Effects

    Ling

    Thanks for the link;
    There are some very simples CSS tutorial for beginner (and maybe more than beginner...):
    CSS Tutorial and source code

Sign In or Register to comment.