Unwanted line effect when hovering small (regular) image

[benjaminadk]

I attached a pic rather than try to explain. After exploring things in devtools a little bit my best guess is that something is slightly off in a css transform: translate(), in the y-axis in two of the four divs that create the darker overlay.

Not sure how to fix this or how exactly I caused it.

Right now the ReactImageMagnify and the helper text I chose are in a div with the following css code:

    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vh;

When I remove the margin the strange effect goes away. I have tried other css approaches - padding, transforms - to get the spacing I want, but the lines come back.

Cool Component. Any help would be appreciated. Thanks.

[benjaminadk]

Upon further messing around the lines go away when using px, rem and em units for margin. When using vh or % the lines appear. Not a perfect solution makes me think this is a larger type of issue relating more to how relative unit measurements are calculated than this component.

[ethanselzer]

@benjaminadk - Thanks for reporting this issue. I really appreciate the level of detail you provided. I'm wondering which Web browser(s) and operating system you experienced this on.

[benjaminadk]

@ethanselzer - no problem. I am on Windows 10 and Chrome 64

[artuswo443]

Same problem. Windows 10, chrome 64, opera too. In edge the problem is visible for about half second and disappearing until I change photo

[ethanselzer]

@artuswo443 - Thanks for your report. I'm sorry for the problem. Does your containing element implements vh or % units, like benjaminadk's did.

[ghost]

Same here. I'm using the magnifier inside a container with percentage width. The calculated heights and y-positions of the semi-transparent boxes are floating point numbers (.5) so this may cause the horizontal lines.

[ethanselzer]

Thanks to all who reported this issue. I really appreciate it. A patch has been released that may correct the problem. Please have a look at the demo site and install v2.6.3 on your projects. Please let me know your findings.

[evannoronha]

Patch in 2.6.3 fixed the issue! Thanks @ethanselzer.

[evannoronha]

I spoke too soon. The issue is still present on Edge and IE 11.