- Issue created by @dkoltovich
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.
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.
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.
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.
Active
2.4
Code