Carousel left and right slide show arrow icon not working properly in iPhone email client

[TechBill]

Describe the bug I created an email that use the MJML carousel element which works fine on Desktop email client but when on iPhone email client, clicking on either right or left does display the next image in array however if you click on it again for the second time then it display the arrow icon image itself.

To Reproduce Steps to reproduce the behavior: Create MJML using MJML carousel element and send out. Open email and click on either left or right arrow icon button at least twice.

Expected behavior I expected it to go either left or right to the next image in array instead I get an image of the arrow icon itself display on my screen after clicking it for the second time.

MJML environment (please complete the following information):

• OS: macOS Ventura 13.0.1
• MJML Version: 4.12
• MJML tool used MJML App 3.0.4

Email sending environment(for rendering issues):

• Platform used to send the email Both self-host Mautic (open source) and MailJet

Affected email clients (for rendering issues):

• Email Client iPhone email client
• OS: iOS 16.1.1

MJML code that I wrote to test it with.

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text align="center" color="#555" />
      <mj-section background-color="#fff" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#eee">
    <mj-hero mode="fixed-height" height="469px" background-width="600px" background-height="469px" background-url="https://warehouse.agwm.org/repository/image/mjml/herobg.jpg" background-color="#2a3448" padding="100px 0px">
      <mj-text padding="20px" color="#000" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900"> Combined Missions Connect 2023 </mj-text>
      <mj-button href="#" align="center"> ORDER YOUR TICKET NOW </mj-button>
    </mj-hero>
    <mj-section>
      <mj-column>
        <mj-text align="left"> There was something in the sky. What exactly was up there wasn't immediately clear. But there was definitely something in the sky and it was getting bigger and bigger. </mj-text>
      </mj-column>
      <mj-column>
        <mj-text align="left"> The rain and wind abruptly stopped, but the sky still had the gray swirls of storms in the distance. Dave knew this feeling all too well. The calm before the storm. He only had a limited amount of time before all Hell broke loose, but he stopped to admire the calmness. Maybe it would be different this time, he thought, with the knowledge deep within that it wouldn't. </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-carousel>
          <mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss1.jpg" />
          <mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss2.jpg" />
          <mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss3.jpg" />
          <mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss4.jpg" />
          <mj-carousel-image src="https://warehouse.agwm.org/repository/image/mjml/ss5.jpg" />
        </mj-carousel>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text align="left"> The wave crashed and hit the sandcastle head-on. The sandcastle began to melt under the waves force and as the wave receded, half the sandcastle was gone. The next wave hit, not quite as strong, but still managed to cover the remains of the sandcastle and take more of it away. The third wave, a big one, crashed over the sandcastle completely covering and engulfing it. When it receded, there was no trace the sandcastle ever existed and hours of hard work disappeared forever. </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook" href="https://mjml.io/"> Facebook </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/"> Google </mj-social-element>
          <mj-social-element name="twitter" href="https://mjml.io/"> Twitter </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

[iRyusa]

Can you try with putsmail.com I can't reproduce your issue on my own ?