3

I'm trying to create an interactive calendar. I've added a neat CSS Card Flip animation (tutorial here) to flip a calendar date and display more information on the back of the card.

Problem if you hover your mouse over the dates, for some reason there is a small, highlighted white bar at the top of the box. I can't seem to figure out how to fix it (red arrow in the image below indicates the problem).

Problem indicated by the red arrow

Here is a CodePen and HTML illustrating the problem. I'm not sure what part of the CSS code is causing the problem. http://codepen.io/ipiyale/pen/Athfd?editors=110

<div class="col-lg-2 col-md-4 col-xs-6 thumb flip-container">
    <div class="thumbnail flipper">
        <div class="day front"><h2>1</h2></div>
        <div class="activity back">
            <p>Afternoon Activity</p>
            <p>Evening Activity</p>
        </div>
    </div>
</div>

Any suggestions?

trnelson
  • 2,715
  • 2
  • 24
  • 40
ipiyale
  • 57
  • 1
  • 8

2 Answers2

2

The issue is caused by the padding: 4px; on the .thumbnail class.

.thumbnail is a built-in Bootstrap style. Your best bet would be to override the padding in your own CSS.

To see this, open the browser inspector (in Chrome, right-click and choose "Inspect Element") and you'll see that the .thumbnail class has a padding of 4px. If you uncheck that style, you'll see that the problem goes away.

I've posted a fork of your demo here. You can see near the bottom of your CSS where I added an override for padding: http://codepen.io/anon/pen/eHKma

.thumbnail {
    padding: 0;
}
trnelson
  • 2,715
  • 2
  • 24
  • 40
1

Using backface-visibility appears to help.

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
}

via How to fix flicker when using Webkit transforms & transitions

Another solution, involves moving the elements that are causing the flickering. See Flickering div when using CSS transform on hover.

Community
  • 1
  • 1
JSuar
  • 21,056
  • 4
  • 39
  • 83
  • This does fix the problem when the card is flipped, but the padding issue still appears for a split second during the rollover. – trnelson Oct 27 '14 at 02:58
  • 1
    Yes, it looks like the padding is causing the overall issue. I'll leave my answer for other folks where this solution may be applicable. – JSuar Oct 27 '14 at 03:00
  • Definitely interesting! Not a style I am familiar with so I'll need to look into it. :) – trnelson Oct 27 '14 at 03:02
  • Thanks so much for answering this! This together with @JSuar's padding suggestion did the trick. Thank you both for helping out! – ipiyale Oct 27 '14 at 05:32