svg clipPath refuses to repaint in webkit about react-image-crop

[sekoyo]

Hi is that mobile or desktop and what version? When I last checked this was working so it may be a regression or some specific combo I didn't check

[shovemedia]

Chrome and Safari on Mac. Firefox was fine. Didn't check mobile.

[sekoyo]

@shovemedia Safari 9 or 10?

[sekoyo]

Just tested and works fine on Safari 10 on Mac, I'm pretty sure on 9 too. If you clone this repo, run npm i && npm start and then open demo/index.html in Safari do you have the issue? If not it could be caused by your code.

[shovemedia]

My Safari is v9. Demo svg clippath works in both Chrome and Safari (although the programmatic state changes seem to throw JS errs?)

As it's clearly some kind of browser repaint bug, there's no telling what DOM-specifics are necessary to reliably reproduce the issue.

[sekoyo]

I'm no longer using an SVG clipPath so this problem should be resolved

[omygodGIT]

What alternative did you use?

[sekoyo]

@omygodGIT it's now using a large box-shadow - https://github.com/DominicTobias/react-image-crop/blame/master/lib/ReactCrop.scss#L53

Drawback of this method in this case is that the container needs overflow: hidden so the drag handles can't appear outside the container when dragged to the edges