débordement: fonctionne dans Firefox mais pas dans Chrome. Pourquoi?

J'ai essayé de jouer un peu avec le CSS3 et de créer un logo Netscape purement en CSS3 pour l'entraînement.débordement: fonctionne dans Firefox mais pas dans Chrome. Pourquoi?

Voici le lien:

http://alonbt.com/css3/netscape/

La chose est: Dans Firefox tout semble bien, mais Chrome quelque chose tournerait mal. Je suppose que c'est le overflow:hidden que j'ai - dans Firefox cela fonctionne mais Chrome ne semble pas le rendre bien.

Des suggestions sur ce qui pourrait être le problème?

Source

2011-08-08 Alon

Bien fait! Il semble que cela pourrait être un problème avec 'border-radius' avec' overflow: hidden' comme vous l'avez dit. Il semble que webkit ne comprend pas ces deux-là, et le traite comme s'il était rectangulaire. Vous devriez envisager de déposer un rapport de bogue sur webkit. http://www.webkit.org/quality/reporting.html – mqchen

De bonnes choses! Le bug que vous rencontrez est peut-être celui-ci: http://code.google.com/p/chromium/issues/detail?id=60005. Cela peut être un problème similaire: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera, que l'affiche a pu résoudre. J'ai remarqué que prendre 'position: relative' sur 'whiteCircle' et 'blackCircle' et les déplacer avec des marges négatives fonctionnait mieux, mais vous avez probablement une meilleure idée de la façon d'obtenir l'effet que vous recherchez. –

hé, bon travail. Si vous le souhaitez, fourchez mon [projet Github] (https://github.com/thomas4g/CSS-Art) et ajoutez-le à la collection. :) ... c'est beaucoup plus agréable que le mien. –

J'ai exposé en détail cette question ici: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html

tu es touché par https://bugs.webkit.org/show_bug.cgi?id=50072

En particulier, la question apparaît dans Safari aussi.

Source

2011-08-11 05:51:55 bluesmoon

Je dois dire que je suis très surpris de voir un problème comme celui-ci dans Webkit. – jffgrdnr

Ce sera génial si vous allez ajouter plus de détails à la réponse, pas seulement laisser tomber quelques liens. – Pavlo

Vous pouvez contourner ce problème si vous n'utilisez pas le positionnement relatif. Essayez de vous débarrasser de la propriété CSS 'position: absolute' et utilisez plutôt des marges négatives (par exemple, dans votre cas, quelque chose comme: 'margin: -204px 0 0 -475px;').

Faites attention cependant que vous devrez compenser en quelque sorte sur la commande d'article (vous n'avez plus le contrôle sur z-index mais vous en avez besoin).

Source

2011-08-14 20:17:56 Yuval

J'ai eu le même problème dans Chrome sur un ordinateur Windows, un img dans un div, avec débordement: caché sur le div. Sur Mac, tout s'est bien passé, mais Windows Chrome a ignoré le débordement: caché. Ma solution: -webkit-transform: scale (1); sur l'img (l'enfant).

Source

2013-07-16 13:13:30

débordement: fonctionne dans Firefox mais pas dans Chrome. Pourquoi?

Répondre

Questions connexes