search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
17.04k stars 959 forks source link

mj-carousel thumbnail image flickering on hover #1699

Closed Kuhreez closed 5 years ago

Kuhreez commented 5 years ago

Describe the bug The carousel's thumbnail image will flicker on hover when height of a thumbnail image is not as tall as the other ones

To Reproduce Steps to reproduce the behavior:

  1. Create a file with this MJML code: 

    <mjml>
<mj-head>
<mj-attributes>
  <mj-all font-family="Arial">
  </mj-all>
</mj-attributes>
<mj-preview>{{ preheader }}
</mj-preview>
<mj-style>
  @font-face {
  font-family: 'Futura';
  src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Futura-Medium-01.ttf) format('truetype');
  }
  @font-face {
  font-family: 'Gotham Book';
  src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Gotham-Book.otf) format('opentype');
  }
  @font-face {
  font-family: 'Gotham Condensed Medium';
  src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Gotham+Condensed+Medium.otf) format('opentype');
  }
  @font-face {
  font-family: '308-CAI978';
  src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/308-CAI978.ttf) format('truetype');
  }
</mj-style>
</mj-head>
<mj-body>
<mj-container>
  <mj-section padding-bottom="3px" padding-top="3px">
    <mj-column>
      <mj-carousel thumbnails="visible" border-radius="6px 6px 6px 6px" tb-border="10px solid transparent" tb-border-radius="6px 6px 6px 6px" tb-hover-border-color="#ab873f" tb-selected-border-color="#994848" tb-width="100px" icon-width="22px" left-icon="https://image.flaticon.com/icons/svg/54/54321.svg" right-icon="https://image.flaticon.com/icons/svg/54/54833.svg">
        <mj-carousel-image src="https://springbot_www_development.s3.amazonaws.com/springmail/123/hackerman-ag1o7n4.png" href="https://www.google.com/" thumbnails-src="https://springbot_www_development.s3.amazonaws.com/springmail/123/s-l300-55j08y.jpg">
        </mj-carousel-image>
        <mj-carousel-image src="https://cdn.shopify.com/s/files/1/0288/1936/products/pahapiccw10s.jpg?v=1464813111">
        </mj-carousel-image>
        <mj-carousel-image src="https://s3.amazonaws.com/springbot-assets/images/your_images_goes_here_camera.png">
        </mj-carousel-image>
        <mj-carousel-image src="https://s3.amazonaws.com/springbot-www-demo/products/SpringStreet33.jpg">
        </mj-carousel-image>
      </mj-carousel>
    </mj-column>
  </mj-section>
</mj-container>
</mj-body>
</mjml>

  2. Rendered HTML Code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <title>
    </title>
    <!--[if !mso]><!-- -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      #outlook a {
        padding: 0;
      }
      .ReadMsgBody {
        width: 100%;
      }
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass * {
        line-height:100%;
      }
      body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table, td {
        border-collapse:collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      p {
        display: block;
        margin: 13px 0;
      }
    </style>
    <!--[if !mso]><!-->
    <style type="text/css">
      @media only screen and (max-width:480px) {
        @-ms-viewport {
          width:320px;
        }
        @viewport {
          width:320px;
        }
      }
    </style>
    <!--<![endif]-->
    <!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
    <!--[if lte mso 11]>
<style type="text/css">
.outlook-group-fix {
width:100% !important;
}
</style>
<![endif]-->
    <style type="text/css">
      @font-face {
        font-family: 'Futura';
        src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Futura-Medium-01.ttf) format('truetype');
      }
      @font-face {
        font-family: 'Gotham Book';
        src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Gotham-Book.otf) format('opentype');
      }
      @font-face {
        font-family: 'Gotham Condensed Medium';
        src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/Gotham+Condensed+Medium.otf) format('opentype');
      }
      @font-face {
        font-family: '308-CAI978';
        src: url(https://s3.amazonaws.com/springbot-fonts/sb-font/308-CAI978.ttf) format('truetype');
      }
    </style>
    <style type="text/css">
      .mj-carousel {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .mj-carousel-icons-cell {
        display: table-cell !important;
        width: 22px !important;
      }
      .mj-carousel-radio,
      .mj-carousel-next,
      .mj-carousel-previous {
        display: none !important;
      }
      .mj-carousel-thumbnail,
      .mj-carousel-next,
      .mj-carousel-previous {
        touch-action: manipulation;
      }
      .mj-carousel-radio:checked + .mj-carousel-content .mj-carousel-image,.mj-carousel-radio:checked + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-radio:checked + * + * + .mj-carousel-content .mj-carousel-image,.mj-carousel-radio:checked + * + * + * + .mj-carousel-content .mj-carousel-image {
        display: none !important;
      }
      .mj-carousel-radio-1:checked + * + * + * + .mj-carousel-content .mj-carousel-image-1,.mj-carousel-radio-2:checked + * + * + .mj-carousel-content .mj-carousel-image-2,.mj-carousel-radio-3:checked + * + .mj-carousel-content .mj-carousel-image-3,.mj-carousel-radio-4:checked + .mj-carousel-content .mj-carousel-image-4 {
        display: block !important;
      }
      .mj-carousel-previous-icons,
      .mj-carousel-next-icons,
      .mj-carousel-radio-1:checked + * + * + * + .mj-carousel-content .mj-carousel-next-2,.mj-carousel-radio-2:checked + * + * + .mj-carousel-content .mj-carousel-next-3,.mj-carousel-radio-3:checked + * + .mj-carousel-content .mj-carousel-next-4,.mj-carousel-radio-4:checked + .mj-carousel-content .mj-carousel-next-1,
      .mj-carousel-radio-1:checked + * + * + * + .mj-carousel-content .mj-carousel-previous-4,.mj-carousel-radio-2:checked + * + * + .mj-carousel-content .mj-carousel-previous-1,.mj-carousel-radio-3:checked + * + .mj-carousel-content .mj-carousel-previous-2,.mj-carousel-radio-4:checked + .mj-carousel-content .mj-carousel-previous-3 {
        display: block !important;
      }
      .mj-carousel-radio-1:checked + * + * + * + .mj-carousel-content .mj-carousel-thumbnail-1,.mj-carousel-radio-2:checked + * + * + .mj-carousel-content .mj-carousel-thumbnail-2,.mj-carousel-radio-3:checked + * + .mj-carousel-content .mj-carousel-thumbnail-3,.mj-carousel-radio-4:checked + .mj-carousel-content .mj-carousel-thumbnail-4 {
        border-color: #994848 !important;
      }
      .mj-carousel-image img + div,
      .mj-carousel-thumbnail img + div {
        display: none !important;
      }
      .mj-carousel-thumbnail:hover + * + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-thumbnail:hover + * + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-thumbnail:hover + * + .mj-carousel-main .mj-carousel-image,.mj-carousel-thumbnail:hover + .mj-carousel-main .mj-carousel-image {
        display: none !important;
      }
      .mj-carousel-thumbnail:hover {
        border-color: #ab873f !important;
      }
      .mj-carousel-thumbnail-1:hover + * + * + * + .mj-carousel-main .mj-carousel-image-1,.mj-carousel-thumbnail-2:hover + * + * + .mj-carousel-main .mj-carousel-image-2,.mj-carousel-thumbnail-3:hover + * + .mj-carousel-main .mj-carousel-image-3,.mj-carousel-thumbnail-4:hover + .mj-carousel-main .mj-carousel-image-4 {
        display: block !important;
      }
    </style>
    <style type="text/css" id="mj-carousel-fallback">
      .mj-carousel noinput {
        display:block !important;
      }
      .mj-carousel noinput .mj-carousel-image-1 {
        display: block !important;
      }
      .mj-carousel noinput .mj-carousel-arrows,
      .mj-carousel noinput .mj-carousel-thumbnails {
        display: none !important;
      }
      [owa] .mj-carousel-thumbnail {
        display: none !important;
      }
      @media screen yahoo {
        .mj-carousel-icons-cell,
        .mj-carousel-previous-icons,
        .mj-carousel-next-icons {
          display: none !important;
        }
        .mj-carousel-radio-1:checked + *+ *+ *+ .mj-carousel-content .mj-carousel-thumbnail-1 {
          border-color: transparent;
        }
      }
    </style>
    <style type="text/css">
      @media only screen and (min-width:480px) {
        .mj-column-per-100 {
          width:100%!important;
        }
      }
    </style>
  </head>
  <body>
    <div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
      {{ preheader }}
    </div>
    <div class="mj-container">
      <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;">
<tr>
<td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
<![endif]-->
      <div style="margin:0px auto;max-width:600px;">
        <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;" align="center" border="0">
          <tbody>
            <tr>
              <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:3px;padding-top:3px;">
                <!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;width:600px;">
<![endif]-->
                <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                  <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
                    <tbody>
                      <tr>
                        <td style="word-wrap:break-word;font-size:0px;" align="center">
                          <!--[if !mso]><!-->
                          <div class="mj-carousel" data-length="4" data-icon-width="22px" data-hover-border-color="#ab873f" data-selected-border-color="#994848">
                            <input type="radio" class="mj-carousel-radio mj-carousel-radio-1" name="mj-carousel-radio" id="mj-carousel-radio-1" style="display:none;mso-hide:all;" checked="">
                            <input type="radio" class="mj-carousel-radio mj-carousel-radio-2" name="mj-carousel-radio" id="mj-carousel-radio-2" style="display:none;mso-hide:all;">
                            <input type="radio" class="mj-carousel-radio mj-carousel-radio-3" name="mj-carousel-radio" id="mj-carousel-radio-3" style="display:none;mso-hide:all;">
                            <input type="radio" class="mj-carousel-radio mj-carousel-radio-4" name="mj-carousel-radio" id="mj-carousel-radio-4" style="display:none;mso-hide:all;">
                            <div class="mj-carousel-content" style="display:table;width: 100%;table-layout:fixed;text-align:center;font-size:0px;">
                              <a style="display:inline-block;overflow:hidden;border:10px solid transparent;border-radius:6px 6px 6px 6px;width:100px;" href="#1" class="mj-carousel-thumbnail mj-carousel-thumbnail-1"><label for="mj-carousel-radio-1"><img src="https://springbot_www_development.s3.amazonaws.com/springmail/123/s-l300-55j08y.jpg" style="display:block;width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="100"></label></a>
                              <a style="display:inline-block;overflow:hidden;border:10px solid transparent;border-radius:6px 6px 6px 6px;width:100px;" href="#2" class="mj-carousel-thumbnail mj-carousel-thumbnail-2"><label for="mj-carousel-radio-2"><img src="https://cdn.shopify.com/s/files/1/0288/1936/products/pahapiccw10s.jpg?v=1464813111" style="display:block;width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="100"></label></a>
                              <a style="display:inline-block;overflow:hidden;border:10px solid transparent;border-radius:6px 6px 6px 6px;width:100px;" href="#3" class="mj-carousel-thumbnail mj-carousel-thumbnail-3"><label for="mj-carousel-radio-3"><img src="https://s3.amazonaws.com/springbot-assets/images/your_images_goes_here_camera.png" style="display:block;width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="100"></label></a>
                              <a style="display:inline-block;overflow:hidden;border:10px solid transparent;border-radius:6px 6px 6px 6px;width:100px;" href="#4" class="mj-carousel-thumbnail mj-carousel-thumbnail-4"><label for="mj-carousel-radio-4"><img src="https://s3.amazonaws.com/springbot-www-demo/products/SpringStreet33.jpg" style="display:block;width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="100"></label></a>
                              <table cellspacing="0" width="100%" role="presentation" style="caption-side:top;display:table-caption;table-layout:fixed;width:100%;" class="mj-carousel-main">
                                <tbody>
                                  <tr>
                                    <td class="mj-carousel-icons-cell" style="display:none;mso-hide:all;">
                                      <div class="mj-carousel-previous-icons" style="display:none;mso-hide:all;">
                                        <label for="mj-carousel-radio-1" class="mj-carousel-previous mj-carousel-previous-1"><img src="https://image.flaticon.com/icons/svg/54/54321.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-2" class="mj-carousel-previous mj-carousel-previous-2"><img src="https://image.flaticon.com/icons/svg/54/54321.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-3" class="mj-carousel-previous mj-carousel-previous-3"><img src="https://image.flaticon.com/icons/svg/54/54321.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-4" class="mj-carousel-previous mj-carousel-previous-4"><img src="https://image.flaticon.com/icons/svg/54/54321.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                      </div>
                                    </td>
                                    <td>
                                      <div class="mj-carousel-images" style="padding:20px;">
                                        <div class="mj-carousel-image mj-carousel-image-1">
                                          <a href="https://www.google.com/" target="_blank"><img src="https://springbot_www_development.s3.amazonaws.com/springmail/123/hackerman-ag1o7n4.png" style="display:block;width:600px;max-width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="400"></a>
                                        </div>
                                        <div class="mj-carousel-image mj-carousel-image-2" style="display:none;mso-hide:all;">
                                          <img src="https://cdn.shopify.com/s/files/1/0288/1936/products/pahapiccw10s.jpg?v=1464813111" style="display:block;width:600px;max-width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="400">
                                        </div>
                                        <div class="mj-carousel-image mj-carousel-image-3" style="display:none;mso-hide:all;">
                                          <img src="https://s3.amazonaws.com/springbot-assets/images/your_images_goes_here_camera.png" style="display:block;width:600px;max-width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="400">
                                        </div>
                                        <div class="mj-carousel-image mj-carousel-image-4" style="display:none;mso-hide:all;">
                                          <img src="https://s3.amazonaws.com/springbot-www-demo/products/SpringStreet33.jpg" style="display:block;width:600px;max-width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="400">
                                        </div>
                                      </div>
                                    </td>
                                    <td class="mj-carousel-icons-cell" style="display:none;mso-hide:all;">
                                      <div class="mj-carousel-next-icons" style="display:none;mso-hide:all;">
                                        <label for="mj-carousel-radio-1" class="mj-carousel-next mj-carousel-next-1"><img src="https://image.flaticon.com/icons/svg/54/54833.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-2" class="mj-carousel-next mj-carousel-next-2"><img src="https://image.flaticon.com/icons/svg/54/54833.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-3" class="mj-carousel-next mj-carousel-next-3"><img src="https://image.flaticon.com/icons/svg/54/54833.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                        <label for="mj-carousel-radio-4" class="mj-carousel-next mj-carousel-next-4"><img src="https://image.flaticon.com/icons/svg/54/54833.svg" alt="" style="display:block;width:100%;height:auto;" width="22"></label>
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </div>
                          <!--<![endif]-->
                          <!--[if mso]>
<a href="https://www.google.com/" target="_blank"><img src="https://springbot_www_development.s3.amazonaws.com/springmail/123/hackerman-ag1o7n4.png" style="display:block;width:600px;max-width:100%;height:auto;border-radius:6px 6px 6px 6px;" width="400"></a>
<![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]>
</td></tr></table>
<![endif]-->
    </div>
  </body>
</html>

Expected behavior The images should not flicker when hovering over a thumbnail image

MJML environment (please complete the following information):

Screenshots flickeringissue

iRyusa commented 5 years ago

Not really something we can do about it because we rely only on css hover here

Kuhreez commented 5 years ago

Well bummer

kmcb777 commented 5 years ago

@Kuhreez here the problem seems to be that your images have a very different height/width ratio, so when you hover a thumbnail, it displays the corresponding image, which is smaller, and the container height changes a lot. For now what you could do is add blank space on the sides of some of the images so that they all have the same ratio.

@iRyusa maybe we could add the possibility to set the width/height of the images ?

Kuhreez commented 5 years ago

@kmcb777 Thanks for the feedback! Yes that would be nice. Or it could also be nice if we had the option to put the images inside a container with fixed width/height and the images.