Clearing CSS Map Flags (padding? Margin?)
I am trying to create an interactive calendar. I added a neat CSS flash card animation (tutorial here) to flip the calendar date and display additional information on the back of the card.
The problem is if you hover your mouse over the dates, for some reason there is a small highlighted white bar at the top of the window. I can't figure out how to fix this (the red arrow in the image below indicates the problem).
Here is the code and HTML to illustrate the problem. I'm not sure which 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?
source to share
Using it backface-visibility
helps.
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-backface-visibility: hidden;
}
via How to fix flickering when using Webkit broadcasts and transitions
Another solution involves moving elements that cause flicker. See Flickering a div when using CSS transform on hover .
source to share
The problem is caused padding: 4px;
in the class .thumbnail
.
.thumbnail
is the inline style of Bootstrap. 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 select Inspect Element) and you will see that the class .thumbnail
is indented 4px. If you remove this style, you will see that the problem goes away.
I've posted a fork of your demo here. You can see at the bottom of my CSS where I added an override for padding: http://codepen.io/anon/pen/eHKma
.thumbnail {
padding: 0;
}
source to share