jquery - Child Div not respecting Overflow hidden In Safari -
on below fiddle, there pagination, when hover pagination circle animate but, in safari image inside circle not respecting overflow hidden, in other browsers working fine..
in solution, image needs centered vertically...
fiddle:-
html
<div class="slidecontainer vidopia slide-row"> <div class="article_pagination2"> <div class="back_arrow2 arrow-disable"><a title="prev" href="javascript:void(0);"><strong>prev</strong></a></div> <ul> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=1'" class="pagination_no2"><span title="slide 1" class="pg_number2 active">1</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=2'" class="pagination_no2"><span title="slide 2" class="pg_number2 ">2</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/dhoni_1428406477.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=3'" class="pagination_no2"><span title="slide 3" class="pg_number2 ">3</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/bailey_1428406477.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=4'" class="pagination_no2"><span title="slide 4" class="pg_number2 ">4</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/gautam_1428406478.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=5'" class="pagination_no2"><span title="slide 5" class="pg_number2 ">5</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/rohit-1_1428406482.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=6'" class="pagination_no2"><span title="slide 6" class="pg_number2 ">6</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/watson_1428406488.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=7'" class="pagination_no2"><span title="slide 7" class="pg_number2 ">7</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/virat-1_1428406484.jpg"></span></figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=8'" class="pagination_no2"><span title="slide 8" class="pg_number2 ">8</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/warner_1428406486.jpg"></span></figure> </div> </li> </ul> <div class="next_arrow2 "><a title="next" href="http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=2"><strong>next</strong></a></div> </div> </div> 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: .5s ease; -webkit-transition: .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 { 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 { 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; }
this appears safari bug, doesn't seem position: relative; on .article_pagination2 li .image_inner , position: absolute; on .article_pagination2 li .article_image2 img. if remove position these 2 selectors issue disappears. means centering of img needs handled in different way (as absolute positioning cannot used), have added pseudo element display: inline-block;, height: 100%; , vertical-align: middle; allow img vertically aligned center of .article_image2.
- remove
position: relative;.article_pagination2 li .image_inner - add
.article_pagination2 li .image_inner:afterstyles allow image vertically align - remove styles relating
absolutepositioning.article_pagination2 li .article_image2 img - add
vertical-align: middle;.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: .5s ease; -webkit-transition: .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 { 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 { 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; }<div class="slidecontainer vidopia slide-row"> <style> </style> <div class="article_pagination2"> <div class="back_arrow2 arrow-disable"><a title="prev" href="javascript:void(0);"><strong>prev</strong></a> </div> <ul> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=1'" class="pagination_no2"><span title="slide 1" class="pg_number2 active">1</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/players_1428406480.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=2'" class="pagination_no2"><span title="slide 2" class="pg_number2 ">2</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/dhoni_1428406477.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=3'" class="pagination_no2"><span title="slide 3" class="pg_number2 ">3</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/bailey_1428406477.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=4'" class="pagination_no2"><span title="slide 4" class="pg_number2 ">4</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/gautam_1428406478.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=5'" class="pagination_no2"><span title="slide 5" class="pg_number2 ">5</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/rohit-1_1428406482.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=6'" class="pagination_no2"><span title="slide 6" class="pg_number2 ">6</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/watson_1428406488.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=7'" class="pagination_no2"><span title="slide 7" class="pg_number2 ">7</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/virat-1_1428406484.jpg"></span> </figure> </div> </li> <li> <div onclick="location.href='http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=8'" class="pagination_no2"><span title="slide 8" class="pg_number2 ">8</span> <figure class="article_image2"><span class="image_inner"><img src="http://i9.dainikbhaskar.com/thumbnail/70x70/web2images/www.bhaskar.com/2015/04/07/warner_1428406486.jpg"></span> </figure> </div> </li> </ul> <div class="next_arrow2 "><a title="next" href="http://www0.bhaskar.com/news-ht/spo-ipl-ofipl-introducing-all-the-teams-of-indian-premier-league-8-4957058-pho.html?seq=2"><strong>next</strong></a> </div> </div> </div>js fiddle: http://jsfiddle.net/2j795bvm/
Comments
Post a Comment