[Bug] HTML5 Canvas Textfield Offset with colorTransform


#1

Hello,

we were seeing a problem with TextFields in HTML5 canvas mode where the TextFields were incorrectly placed with a little offset when a colorTransform was applied to the parent MovieClip. I investigated the behavior and I think the problem originates from TextField.hx method __updateCacheBitmap:

if (__cacheBitmap != null) {
			
    __cacheBitmap.__renderTransform.tx -= __offsetX;
    __cacheBitmap.__renderTransform.ty -= __offsetY;
			
}

If these lines are commented out, everything works as expected. I think the offset is actually applied twice at the moment, __updateTransforms() also applies the offset, which is called from within DisplayObject.__updateCacheBitmap via __update().

So far the fix seems to have no other side effects in our project. Here is a pull request: https://github.com/openfl/openfl/pull/1929

Let me know in case I missed something.


#2

Thanks, I know this was necessary before for SWF-based objects, but perhaps our cacheAsBitmap refactor makes this unnecessary. We’ll merge for now and keep an eye on it. Thank you :slight_smile:


#3

Thanks,I just created another PR:

I found that my initial change correctly fixed the positioning of the TextField, however the size of the Bitmap was too small in some cases. It seems that the __getBounds logic was changed and does not work correctly anymore.

By adjusting the matrix instead of the bounds rectangle in __getBounds(), the size of the Bitmap is corrected as well as the positioning of the matrix in regards of the TextField offset values. Therefore my previous change has to be undone. The positioning is still fixed, but now also the size of the rectangle seems to be correct.

Sorry for the extra round. Let me know in case you face any issues with the change.


#4

Hmm, I’m afraid that this will actually affect textField.getBounds () on SWF-based TextFields, they have an offset X and Y internally, which is reflected when checking the object’s bounds.

Perhaps there is a way to preserve the bounds change, but to change how the rect.__expand call is made, or to respect bounds.x and bounds.y in other code?

I’ve merged your second change as well, to revert the first, and nudge us closer to a fix :slight_smile:


#5

Okay thanks. I will be on vacation the next week but we will have an eye on this and I will update this thread when I am back in case we see any problems on our native targets.


#6

Do you have an easy way to reproduce the issue you saw here with your project?


#7

Yes, we have one button that produces both problems (Textfield position wrong and Textfield cut off). I will export a small file and send you a private message with instructions.