So in January the SweetAlert2 is 100% normal. No bugs on the success and errors icon. but after February, the icons look weird and the animation is so bad.

I've tried to update the CDN because 2 days ago SweetAlert2 update. but still the problems not fixed. maybe you can help me.

---

This the image:

Success icon error

Error icon error

This is the code. I'm using flashdata to show the alert.

<?php if ($this->session->flashdata('success-reg')): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Kamu berhasil daftar!',
    text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
    showConfirmButton: false,
    timer: 2500
})
</script>
<?php endif;?>

So in January the SweetAlert2 is 100% normal. No bugs on the success and errors icon. but after February, the icons look weird and the animation is so bad.

I've tried to update the CDN because 2 days ago SweetAlert2 update. but still the problems not fixed. maybe you can help me.

---

This the image:

Success icon error

Error icon error

This is the code. I'm using flashdata to show the alert.

<?php if ($this->session->flashdata('success-reg')): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Kamu berhasil daftar!',
    text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
    showConfirmButton: false,
    timer: 2500
})
</script>
<?php endif;?>

• javascript
• php
• html
• css
• sweetalert2

Share Improve this question Follow edited Mar 20, 2020 at 2:27 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Mar 5, 2020 at 13:50 SyauqizaidanSyauqizaidan 4511 silver badge1010 bronze badges 10

• Have checked in different browser or in incognito mode? – Rohit.007 Commented Mar 5, 2020 at 13:55
• Have you introduced any new Fonts or CSS libraries into the site? That looks a lot like a font/CSS collision – Wesley Smith Commented Mar 5, 2020 at 13:59
• @Rohit.007 i've tried in incognito and mozzila but still error. – Syauqizaidan Commented Mar 5, 2020 at 14:03
• @WesleySmith im using bootstrap and poppins font. – Syauqizaidan Commented Mar 5, 2020 at 14:05
• I guess there would be a chance of font/CSS or any new plugin collision - also marked by @WesleySmith – Rohit.007 Commented Mar 5, 2020 at 14:06

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 3

Same problem here: it happens because the font-size attribute of <span> in the rest of the document. In my case to solve this issue I forced to change the font-size to 16px to specific class elements which "create" the success and error icons.

• For success icon:

.swal2-success-line-tip, .swal2-success-line-long {
  font-size: 16px !important;
}

• For error icon:

.swal2-x-mark-line-right, .swal2-x-mark-line-left {
  font-size: 16px !important;
} 

It may not be the most elegant solution, but it works.

It is because of the fonts/font styling you are using in html or body tags especially if you are applying for <p> <a> <span> tags globally this happens.

Try to add the font styles in child elements of body tag or highest parent element other than body or html.

Upgrading to v9.x of SweetAlert2. The animation looks good to me.

Swal.fire({
  icon: 'success',
  title: 'Kamu berhasil daftar!',
  text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
  showConfirmButton: false,
  timer: 2500
})

<script src="https://cdn.jsdelivr/npm/sweetalert2@9"></script>