search

youmoula / jcrop

Automatically exported from code.google.com/p/jcrop
0 stars 0 forks source link

1-pixel horizontal shifting of image inside selection box when moving to edges (Chrome 22, possibly others) #83

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
What steps will reproduce the problem?
1. Get an image, drag out a selection box, make it most of the width of the 
image
2. Move the selection box left and right, paying close attention to the lighter 
image inside the selection box
3. Often, as the selection box hits the left and right edges, the image inside 
the selection box shifts by 1-pixel horizontally

What is the expected output? What do you see instead?

The lighter image inside the selection box should ALWAYS be perfectly aligned 
with the darker image outside the selection box

What version of the product are you using? On what operating system?

jCrop v0.9.10, Chrome 22 on Mac OS X Snow Leopard 10.6.8

Please provide any additional information below.

 I can see you've implemented as 2 different images overlaid on each other, this is fair enough, as long as they are always aligned :-)

I've been looking in the element inspector, specifically at the drag-selection 
<div> left and width properties.

The problem is caused by Chrome assigning sub-pixel accuracy when moving any of 
the left or right handles.  You'll quite often get left=80.5, width=200.5 etc.  
Always 0.5, never any other fraction.

When you apply these values as the left-margin on the lighter selected image, 
Chrome can't display the image with a 0.5pixel offset...it's either 0 or 1 
pixel.

When you hit the edges of the image bounds, you've got clamping code in place 
which clears to 0.5pixel discrepancy to 0...you're back on whole pixel values 
now...the image shifts 1 pixel as a result.  Resize the box again, you'll quite 
possibly have 0.5pixels left/width again.

This only happens horizontally for some strange reason...I can't get the 
vertical resizing of the selection box to produce 0.5pixel values.

This is also seemingly a Chrome (or Webkit) only issue.  Firefox behaves 
properly, only whole-pixel values in effect there.

You need to use round()/ceil()/floor(), whatever's correct and the 
drag-listener code to ensure only whole pixel values get through.

Cheers

Andy

Original issue reported on code.google.com by andrewha...@gmail.com on 26 Oct 2012 at 11:10