2

I am not sure if I can explain this without confusing you guys. So, please check the animated Gif.

Works fine with Firefox and IE. I am using TMSlider 0.4.1 for the transitions.

a busy cat

Logic_magic
  • 111
  • 1
  • 5

2 Answers2

0

On the div you have border-radius set, is your css also set to 

.div{overflow:hidden;}
RedBarn
  • 19
  • 4
  • .mp-slider { position:absolute; top:-109px; left:0; right:0; height:511px; border-radius: 55px 55px 0px 0px; -webkit-border-radius: 55px 55px 0px 0px; -moz-border-radius: 55px 55px 0px 0px; overflow:hidden; } This is the CSS used. – Logic_magic Mar 13 '13 at 20:37
  • Is it possible to create a wrapper inside of your mp-slider div which will be the transition div and keep the position absolute on the mp-slider but the new wrapper (transition div) inside has a position set to relative while also having overflow hidden? The position absolute may be directly effecting this transition – RedBarn Mar 13 '13 at 21:34
  • Tried that.. Still didn't work. I am bit new to this. I have hosted it temporarily here. [link](http://bit.ly/16sVtcv). You can check it. Please excuse my very bad copy and paste coding. I am just starting to learn. :p – Logic_magic Mar 13 '13 at 23:14
  • 1
    This is an issue with -webkit- in particular as it does not fully support the logic. My best recommendation are utilizing CSS selectors :before and :after on the div which contains the background image to apply 2 new background images to mask the visibility of the edges which bleed during transition. Screenshot your website and cut out the necessary width and height of each corner (in this case the upper right and left) and use `mp-slider:before{background-image:corner.png;position:absolute;left:2px}` of course using your own necessary pixels to achieve necessary results. Quick Fix! – RedBarn Mar 14 '13 at 02:04
  • Took your advice. Its "fixed" now. Thank you so much for your help. I added corners to the slide pictures as it would appear in the website. Works like a charm. I didn't need to add the :before and :after CSS selectors. – Logic_magic Mar 14 '13 at 06:57
  • 1
    My point in the using these CSS selectors is to prevent the need to add corners to each image added if any new images are added in the future. You can continue to add square images and still have the corners masked with `:after` and `:before` selectors – RedBarn Mar 14 '13 at 20:53
0

I'm having the same issue obviously with the "overflow:hidden" in the container.

The problem appears only if the element inside has an animation (css3), without there are no dealay.

The solution is this one: https://stackoverflow.com/a/27233053/1585052

Community
  • 1
  • 1
Dtnand
  • 421
  • 3
  • 12