Overflow is shown mid css3 transition, how can I hide the overflow?

问题

I have the following structure:

<div class="service lorange">
    <div class="img"></div>
    <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>

And the following CSS:

.service .img {
    transition: opacity 300ms;
}
.service:hover .img {
    opacity:0
}

.service has a rounded border (35px) and overflow: hidden;. This causes the inner .title to have its borders cut-off with its parent's borders (this is the expected behavior).

However, during the transition when hovering, and only mid-transition (since it starts and till it ends, not before or after it starts and finishes), the .title borders do not cut off for some reason.

Any idea what's going on? I've tried making a fiddle, but it doesn't reproduce the issue. What property can be causing this?

Edit: The fiddle in its shell does not reproduce the problem, but looking at the shell alone as a page does (I took the source of the iframe the fiddle uses)

回答1:

The real reason this is happening is that browsers are only cropping the child element properly if it is not positioned (i.e. has position:static;). I've taken the liberty to alter your markup a bit and created a new jsFiddle which works as it should on Chrome, Firefox and IE10 (also working on IE9 but without the transition ofcourse).

Markup:

<div class="serviceContainer"> <!-- added a container -->
    <div class="service lorange">
        <!-- removed div.img -->
        <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
    </div>
</div>

CSS: (I've tried to include only the relevant CSS in the fiddle)

#services-grid .serviceContainer{ /* added a new container which the has the background image */
    background:url(http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F4%2F0%2F394033%2F394033_p_465430.jpg/zoKRL9Oq7JFnhFhhAn%2FfTQ%3D%3D/128,128/6/Catalonia_Yucatan_Beach-Quintana_Roo-Pool-394033.jpg) center center no-repeat;
    float:left;
    border-radius:35px;
    -moz-border-radius:35px;
    -webkit-border-radius:35px;
    -ms-border-radius:35px;
    margin:0 15px;
    overflow:hidden;
}

#services-grid .service.lorange .title span{ /* Give background color only to the span */
    background-color:#efbd00;
}

#services-grid .service.lorange:hover{ /* fade color to container only when hovered */
    background:#efbd00;
}

#services-grid .service .title {
    position:static; /* This is what's doing the trick */
    padding-top:130px; /* position the span using padding instead of position:absolute */
    font-size:13pt;
    text-align:center;
}

The "border-radius on the child" solution is only a cosmetic quickfix which can cause inconsistencies and it's also causing little bumps on each side because of the radius difference:

回答2:

My solution: (But I am looking for a better one.)

#services-grid .service .title {
   position: relative;
   z-index: 10;
   top: 130px;
   font-size: 13pt;
   text-align: center;
   height: 54px; /* IE fix */

   /* Add radius to bottom of .title */
   border-bottom-left-radius: 8px 15px;
   border-bottom-right-radius: 8px 15px;
}

JSFiddle: http://jsfiddle.net/KC4TH/4/

来源：https://stackoverflow.com/questions/17809923/overflow-is-shown-mid-css3-transition-how-can-i-hide-the-overflow