3D CSS transformer, bords irréguliers dans Firefox

Similaires à "css transformer, bords irréguliers dans chrome", même chose se produit avec Firefox sur les transformations 3D, par exemple: http://jsfiddle.net/78d8K/5/ (<- rappelez-vous: Firefox)

Ce temps, backface-visibility n'aide pas 🙁

Une idée?

Voici une version mise à jour avec le support de Webkit: jsfiddle.net/78d8K/6
Ne se soucient pas de webkit (qui est très bien), c'est à propos de Firefox ici 🙂
Vote pour le bug ici: bugzilla.mozilla.org/show_bug.cgi?id=766345

InformationsquelleAutor abernier | 2012-02-10

148

Édité réponse: (après les commentaires)

"Solution de contournement", ajouter un transparent contour attribut:
```
outline: 1px solid transparent;
```
Testé sur Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/

Réponse originale à cette question: (couleur d'arrière-plan dépendante)

"Solution de contournement", ajouter un frontière attribut avec la même couleur de votre arrière-plan (blanc ce cas):
```
border: 1px solid white;
```
Testé sur Firefox 10.0.2 Windows 7: http://jsfiddle.net/LPEfC/
- Intéressant 🙂 et fonctionne en fait sur l'exemple... sauf quand le fond n'est pas plus blanc: jsfiddle.net/LPEfC/1 j'ai essayé avec border-width:0 ou border-color:transparent ou border-color:rgba(255,255,255,0) dans l'ordre le truc background-color indépendant — mais ne fonctionne plus...—, Mais intéressante solution de contournement, thx!
- Lire ma réponse, là encore, mettez de la couleur de votre arrière-plan" à la frontière
- Si aucune autre réponse, vous aurez la générosité 🙂
- L'exécution de l'exemple dans Firefox 10.0.2 sur Windows 7 ordinateur portable avec une résolution d'écran de 1366 x 768 et je suis toujours de voir les bords irréguliers...
- Comme de nombreux pilotes GPU permettent aux utilisateurs de configurer manuellement l'aliasing comportement, je serais surpris (même si, agréablement) si vous pouviez avoir une apparence parfaite sur toutes les configurations possibles.
- Edit: couleur d'arrière-plan de frontière est maintenant un contour transparent
- Pouvez-vous essayer jsfiddle.net/nKhr8 ?
- Mellado - nKhr8 affiche toujours irréguliers sur mon ordinateur portable dans Firefox. (note: Blender original de webkit exemple n'a pas de problèmes dans google chrome sur mon ordinateur portable.)
- Mellado : vous avez gagné votre générosité 🙂
- La raison de ce qui réalise "lissage automatique" est par la présence de l'invisible ou le blanc d'un pixel contour extérieur (le contour). L'antialiasing qui vient de sortir de la texture d'échantillonnage et interpolation. Donc pas de configuration (sauf si vous êtes en quelque sorte par les pilotes de forcer la texture de l'échantillon à NEAREST d'échantillonnage) pour AA (multi-échantillons, etc) aura une incidence sur la sortie
- Firefox 21.0 dans Xubuntu n'a pas lissé, pas de travail ici l'un des exemples. 🙁
- Je ne pensais pas que ça à l'aide d'anti-alias l'intérieur d'un PNG img qui a été rotate(15deg) mais bizarrement, ça le fait!
- Super réponse. +1
- Ne fonctionne pas pour Mac FF lors de l'utilisation d'une frontière-top (pointeur pointe). Intéressant, bien que
- Génial Mec !! il a travaillé pour moi. Merci 🙂
- A travaillé pour moi. Nice clean fix, merci!
- ne fonctionne pas sur Mac FF, malheureusement.
- fonctionne sur chrome
- Génial. Merci beaucoup 🙂
- Cela n'a pas fonctionné pour mon élément qui a skew(10deg)
InformationsquelleAutor Juan Mellado
4

Si vous voulez éviter d'anti-aliasing frontière

Ci-dessous ont mieux fonctionné pour moi
```
border: 1px solid rgba(0, 0, 0, 0.1); 
```
si la frontière doit être clairement visible, cela pourrait ne pas être la solution parfaite, dans laquelle vous feriez mieux de se en tenir à @Juan réponse.

Ci-dessous est une capture d'écran prise du cube tournant
- Cela fonctionnait sur Mac Firefox pour moi, quand la solution retenue n'a pas.
InformationsquelleAutor Rafik Bari
0

En dehors de l'aide outline, les ouvrages suivants: les
```
box-shadow: 0 0 0 1px transparent;
```
InformationsquelleAutor Renaat De Muynck

Vous devez vous connecter pour publier un commentaire.