Child Div not respecting Overflow hidden In Safari

Question

On below Fiddle, There is a pagination, when you will hover the pagination a circle will animate up but, In safari the image inside that circle is not respecting overflow hidden, In other browsers its working fine..

In any solution, Image needs to be centered vertically...

Fiddle:-

http://jsfiddle.net/w5uhet4x/

html

Css

.article_slide2 {
    font: 25px/20px impact, Arial, Helvetica, sans-serif;
    color: #0065bd;
    display: inline-block;
    margin-top: 20px;
}
.article_pagination2 {
    width: 680px;
    display: inline-block;
    box-sizing: border-box;
    margin: 10px 0;
    position: relative;
}
.article_pagination2:after {
    content: "";
    width: 94%;
    height: 2px;
    background: #0065bd;
    float: left;
    position: absolute;
    left: 22px;
    top: 17px;
    z-index: 0;
}
.article_pagination2 ul {
    float: none;
    margin: 0 auto;
    text-align: center;
    width: 590px;
    font-size: 0px;
}
.article_pagination2 li {
    position: relative;
    cursor: pointer;
    z-index: 2;
    margin: 0 4px;
    display: inline-block;
}
.article_pagination2 li .pg_number2 {
    width: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 14px;
    height: 33px;
    float: left; /*display:table-cell; */
    vertical-align: middle;
    color: #fff;
    border-radius: 50%;
    background: #0065bd;
    border: 2px solid #0065bd;
    position: relative;
    z-index: 2;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    font-family: arial !important;
}
.article_pagination2 li .pg_number2:hover, .article_pagination2 li .pg_number2.active {
    background: #FFFFFF;
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    z-index: 2;
    color: #0065BD;
    border: 2px solid #0065BD;
    font-weight: bold;
    font-size: 18px;
}
.article_pagination2 li:hover .article_image2 {
    visibility: visible;
    opacity: 1;
    top: -85px;
    top: -82px\9;
}
.article_pagination2 li .article_image2 {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    border: 2px solid #0065bd;
    display: inline-block;
    position: absolute;
    top: -40px;
    left: -19px;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    margin: 0;
}
.article_pagination2 li .image_inner {
    border-radius: 50%;
    width: 70px;
    height: 70px;
    display: block;
    overflow: hidden;
    background: #fff;
    position: relative;
}
.article_pagination2 li .article_image2 img {
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
.article_pagination2 li .article_image2:after {
    content: "";
    width: 0;
    height: 0;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-top: 7px solid #0065bd;
    font-size: 0;
    line-height: 0;
    float: right;
    position: absolute;
    bottom: -8px;
    left: 50%;
    z-index: 9;
    margin-left: -6px;
}
.article_pagination2 .back_arrow2 a, .article_pagination2 .next_arrow2 a {
    display: block;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    width: 34px;
    height: 46px;
    border-radius: 50%;
}
.article_pagination2 .back_arrow2 {
    background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_back_page_aro_2.png) no-repeat #fff;
    width: 34px;
    height: 34px;
    float: left;
    overflow: visible;
    background-size: 100%;
    margin-right: 5px;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
}
.article_pagination2 .back_arrow2.arrow-disable {
    background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_back_page_aro_2_disable.png) no-repeat #fff;
}
.article_pagination2 .next_arrow2 {
    background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_next_page_aro_2.png) no-repeat #fff;
    width: 34px;
    height: 34px;
    float: right;
    overflow: visible;
    margin-left: 5px;
    background-size: 100%;
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
}
.article_pagination2 .next_arrow2.arrow-disable {
    background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_next_page_aro_2_disable.png) no-repeat #fff;
}
.article_pagination2 .arrow-disable a {
    cursor: default;
}
.article_pagination2 .next_arrow2 strong, .article_pagination2 .back_arrow2 strong {
    position: absolute;
    bottom: -15px;
    font-size: 12px;
    left: 3px
}
.article_pagination2 .arrow-disable strong {
    color: #aeaeae;
}
.slideContainer.slide-row {
    height: 62px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

Hidden Hobbes · Accepted Answer

This appears to be a Safari bug, it doesn't seem to like position: relative; on .article_pagination2 li .image_inner and position: absolute; on .article_pagination2 li .article_image2 img. If you remove position from these two selectors the issue disappears. This means that the centering of the img needs to be handled in a different way (as absolute positioning cannot be used), so I have added an extra pseudo element with display: inline-block;, height: 100%; and vertical-align: middle; to allow the img to be vertically aligned to the center of .article_image2.

Remove position: relative; from .article_pagination2 li .image_inner
Add .article_pagination2 li .image_inner:after with styles to allow for the image to vertically align
Remove all styles relating to absolute positioning from .article_pagination2 li .article_image2 img
Add vertical-align: middle; to .article_pagination2 li .article_image2 img

.slideContainer {
  margin-top: 100px;
}
.article_slide2 {
  font: 25px/20px impact, Arial, Helvetica, sans-serif;
  color: #0065bd;
  display: inline-block;
  margin-top: 20px;
}
.article_pagination2 {
  width: 680px;
  display: inline-block;
  box-sizing: border-box;
  margin: 10px 0;
  position: relative;
}
.article_pagination2:after {
  content: "";
  width: 94%;
  height: 2px;
  background: #0065bd;
  float: left;
  position: absolute;
  left: 22px;
  top: 17px;
  z-index: 0;
}
.article_pagination2 ul {
  float: none;
  margin: 0 auto;
  text-align: center;
  width: 590px;
  font-size: 0px;
}
.article_pagination2 li {
  position: relative;
  cursor: pointer;
  z-index: 2;
  margin: 0 4px;
  display: inline-block;
}
.article_pagination2 li .pg_number2 {
  width: 33px;
  line-height: 33px;
  text-align: center;
  font-size: 14px;
  height: 33px;
  float: left;
  /*display:table-cell; */
  vertical-align: middle;
  color: #fff;
  border-radius: 50%;
  background: #0065bd;
  border: 2px solid #0065bd;
  position: relative;
  z-index: 2;
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  font-family: arial !important;
}
.article_pagination2 li .pg_number2:hover,
.article_pagination2 li .pg_number2.active {
  background: #FFFFFF;
  transform: scale(1.15);
  -ms-transform: scale(1.15);
  -webkit-transform: scale(1.15);
  z-index: 2;
  color: #0065BD;
  border: 2px solid #0065BD;
  font-weight: bold;
  font-size: 18px;
}
.article_pagination2 li:hover .article_image2 {
  visibility: visible;
  opacity: 1;
  top: -85px;
  top: -82px\9;
}
.article_pagination2 li .article_image2 {
  border-radius: 50%;
  width: 70px;
  height: 70px;
  border: 2px solid #0065bd;
  display: inline-block;
  position: absolute;
  top: -40px;
  left: -19px;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  margin: 0;
}
.article_pagination2 li .image_inner {
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: block;
  overflow: hidden;
  background: #fff;
  /*position: relative; Remove*/
} 
/*Add*/
.article_pagination2 li .image_inner:after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}
.article_pagination2 li .article_image2 img {
  /*bottom: 0; Remove*/
  /*left: 0; Remove*/
  /*margin: auto; Remove*/
  /*position: absolute; Remove*/
  /*right: 0; Remove*/
  text-align: center;
  vertical-align: middle; /*Add*/
  /*top: 0; Remove*/
}
.article_pagination2 li .article_image2:after {
  content: "";
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #0065bd;
  font-size: 0;
  line-height: 0;
  float: right;
  position: absolute;
  bottom: -8px;
  left: 50%;
  z-index: 9;
  margin-left: -6px;
}
.article_pagination2 .back_arrow2 a,
.article_pagination2 .next_arrow2 a {
  display: block;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  width: 34px;
  height: 46px;
  border-radius: 50%;
}
.article_pagination2 .back_arrow2 {
  background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_back_page_aro_2.png) no-repeat #fff;
  width: 34px;
  height: 34px;
  float: left;
  overflow: visible;
  background-size: 100%;
  margin-right: 5px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
}
.article_pagination2 .back_arrow2.arrow-disable {
  background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_back_page_aro_2_disable.png) no-repeat #fff;
}
.article_pagination2 .next_arrow2 {
  background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_next_page_aro_2.png) no-repeat #fff;
  width: 34px;
  height: 34px;
  float: right;
  overflow: visible;
  margin-left: 5px;
  background-size: 100%;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
}
.article_pagination2 .next_arrow2.arrow-disable {
  background: url(http://i9.dainikbhaskar.com/dainikbhaskar2010/images/pagination/ie_next_page_aro_2_disable.png) no-repeat #fff;
}
.article_pagination2 .arrow-disable a {
  cursor: default;
}
.article_pagination2 .next_arrow2 strong,
.article_pagination2 .back_arrow2 strong {
  position: absolute;
  bottom: -15px;
  font-size: 12px;
  left: 3px
}
.article_pagination2 .arrow-disable strong {
  color: #aeaeae;
}
.slideContainer.slide-row {
  height: 62px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

JS Fiddle: http://jsfiddle.net/2j795bvm/

Child Div not respecting Overflow hidden In Safari

Answers (1)

Related Questions