sweetalert
sweetalert copied to clipboard
will-change CSS property causes blurriness of objects
Currently, the swal-modal
class uses the CSS property will-change
.
https://github.com/t4t5/sweetalert/blob/82c8869761c138f1fba7771a818e40f1aab35be6/src/sweetalert.css#L42
While this could help browsers perform optimizations, it also has undesirable side-effects. As of Chrome 53, will-change
will prevent re-rasterization of objects during or after a transform
, which can cause blurry objects and text. Read more about the issue here:
- https://googlechrome.github.io/samples/css-will-change-transform-rasterization/
- https://greensock.com/will-change/
- https://stackoverflow.com/a/54082690
The following screenshots are from https://sweetalert.js.org/ and were taken on Chrome 88.0.4324.190. The first image is with the will-change
property applied. The second image is when I overwrote the property with will-change: unset;
. Take note of the subtle differences.
The second image is noticeably sharper. You may also be able to see the differences easier by toggling the CSS property in the Chrome DevTools menu.
The will-change
property should be removed, or there should be an option to disable this property. In fact, maybe a better solution would be to allow modifications to the default CSS, as mentioned in https://github.com/t4t5/sweetalert/issues/913.
The following workaround solved it for me:
.swal-overlay--show-modal .swal-modal { will-change: unset !important; }
I used the same thing.
.swal-modal {
will-change: unset;
}
worked perfectly with React.