11540 sujets

JavaScript, DOM et API Web HTML5

Probleme webkit / border-radius / jquery

bonjour,

je rencontre actuelement un probleme que je n'arrive pas a résoudre. j'ai cherché sur google mais je n'ai rien trouvé.

le probleme concerne une animation jquery dans un div avec du border-radius.
ce probleme n'apparait uniquement sur le moteur webkit (safari et chrome), en effet sur ffox ou ie9 cela marche tres bien.

voila le problème :
lorsque qu'une animation jquery se deroule dans un div avec du border-radius et un overflow:hidden, ce dernier (l'overflow:hidden) n'est plus pris en compte sur le border-radius.


quelqu'un a deja rencontré ce probleme ? et a trouvé une solution ?


merci de votre aide !

mat


 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>Titre</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
 
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
 
<style type="text/css">
.mask{
    position: relative;
    margin: auto; margin-top: 100px;
    width: 500px; height: 400px;
    overflow: hidden;
    background-color: #333;
    border-radius: 15px;
}
.module{
    position: absolute;
    left: 0; top: 0;
    width: 200px; height: 100%;
    cursor: pointer;
    background-color: #9A3;
}
 
</style>
</head>
<body>
 
 
<div class="mask">
    <div class="module"></div>
</div>
 
 
<script type="text/javascript">
$(function(){
 
 
      $(".module").animate({left: 300}, 1000, 'swing');
 
 
});
</script>
</body>
</html>

Modifié par mat3000 (01 Feb 2013 - 16:02)
Sur Safari, quand j'affiche les outils de développeur et que je trifouille le code HTML (juste en sélectionnant les balises) les bords s'arrondissent.

Donc il est possible que ce soit un bug.

Je propose deux solutions :
1/ Tu arrondis les bords de ton div qui se déplace et c'est réglé.
2/ Si tu veux pas appliquer cette option, tu les arrondis à gauche et quand l'animation se lance tu enlèves se réglages et tu les arrondis à droite en fin d'animation.

Avec de la chance on verra pas la différence mais il se peut que ça fasse un effet disgracieux. En attendant que je trouve autre chose ou que quelqu'un de plus intelligent te donne une meilleure solution Smiley smile
Modifié par MagicCarpet (26 Jan 2013 - 21:35)
Dis moi quand tu l'a mis en place si le résultat est bon ou pas et se qu'il se passe.

Je suis curieux de savoir. J'aimerais bien que quelqu'un d'autre réponde, ça aiderais peut-être un peu.
bon j'ai essayé mais c'est pas parfait Smiley smile

d'autant plus qu'au final, c'est pour quelque chose d'un peu plus complexe...
tiens, voilà, l'info que je cherchais...
J'suis exactement dans le même cas de figure que toi.
As-tu trouvé une solution ?
A priori, ça ressemble à un bug : l'image semble ne pas prendre le radius alors que son border le prend sans problème... j'comprend plus rien..
Sujet clos
Aller à