Use Intersection Observer API for image visibility tracking

Created on 27 March 2023, over 1 year ago

Problem/Motivation

Recently, I've faced with a bug when a crop box does not appear if an image has border radius greater than 0.
One of the solutions is to make sure that an image has no border radius. But in some cases (usage of Bootstrap) it can be tricky because of specificity in CSS.

<!--break-->

The reason of this bug in these lines

// Return true if any of its four corners are visible.
var efp = function (x, y) {
  return document.elementFromPoint(x, y);
};
return (
  el.contains(efp(rect.left, rect.top))
    || el.contains(efp(rect.right, rect.top))
    || el.contains(efp(rect.right, rect.bottom))
    || el.contains(efp(rect.left, rect.bottom))
);

in the file js/ImageWidgetCropType.js.
With rounded corners, everything works a bit strange) The function elementFromPoint() returns a different element (and it's understandable), but an image is visible in reality.

Steps to reproduce

1. Set border radius for images that should be cropped (use a CSS file for that, change in the inspector will not help to reproduce the bug).
2. Try to crop an image.
3. Make sure that crop box does not appears.

Proposed resolution

I propose to use the Intersection Observer API to track image visibility.
If we use it, we can get rid of pollVisibility() method and intervals completely.
I tried it locally and it works just fine. And if this solution sounds fine for you, I can make these changes and create a merge request.

πŸ“Œ Task
Status

Active

Version

2.4

Component

Code

Created by

πŸ‡ΊπŸ‡¦Ukraine dkoltovich

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024