will-change CSS property causes blurriness of objects

[JohnHKoh]

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.

[pietos]

The following workaround solved it for me:

.swal-overlay--show-modal .swal-modal { will-change: unset !important; }

[Androz2091]

I used the same thing.

.swal-modal {
  will-change: unset;
}

worked perfectly with React.