8
votes

CSS div fond d'arrière-plan bug sur chrome?

J'ai des difficultés à régler le fond d'un div au navigateur en chrome. Si vous voyez, j'ai une petite boîte grise plus légère que je n'ai pas implémentée et donner de style. Il apparaît au hasard et se déplace et remodèle comme il le souhaite. Cela ne se produit pas sur Safari ou sur Firefox et je ne comprends pas pourquoi ni comment le réparer.

Chrome Bug Print-Écran

Mon problème est assez étrange. J'ai le code suivant: xxx

édité (classes CSS): xxx

je réglage la couleur arrière Sur la classe 'register-réponse' mais j'ai essayé à chaque div et que le problème est toujours le même (cela ne se produit que sur chrome). J'ai également un enregistrement à l'écran pour que vous puissiez voir: https: // lecteur. google.com/file/d/0b9zcbrcakvkrve3vmnjnmhqlvk/view?usp=sharing


21 commentaires

Pouvez-vous faire un jsfiddle?


@ devnull69 J'utilise réagir, vous pouvez voir sur mes tags.


@Brandonibbotson J'ai édité la question et j'ai écrit la classe CSS là-bas.


Quel est le problème..?


@chiragpatel Je voudrais mais il n'est pas facile de reproduire cette erreur sur jsfiddle, j'ai essayé avec le même code que j'ai et que cela ne se passe pas là-bas.


@Lee la petite boîte grise plus légère au milieu ... Il bouge toujours et remodèle et je ne construisons pas et ne donnant pas de style pour cela n'importe où. J'ai juste un div (Bootstrap Col-LG-6) et je lui donne une couleur backgroud.


On dirait que le rembourrage que .col-lg-6 a été défini peut-être?


Si cela ne se produit nulle part ailleurs, je regarderais à travers votre inspecteur et que vous voyez s'il y a une autre règle CSS chargée qui sont intervenues.


@Lee, NOP, pas à cause du rembourrage. J'ai sorti le rembourrage: 0; et toujours le même problème.


Créez un jsfiddle, même si cela ne fait pas la même chose, de sorte que d'autres puissent au moins essayer de le répliquer.


@Lee Ok, juste un min.


Voici un jsfiddle de travail correctement: jsfiddle.net/thepio/o75sn59x et je dois ajouter que ce n'est pas en train de faire quelque chose de bizarre pour moi


@Lee jsfiddle.net/0zvvudhd/1


@Miguelveloso Avez-vous vérifié si vous avez des balises non récoltées dans votre code quelque part qui pourrait causer vos problèmes car la démonstration ne semble pas bug? Ou fait-il bug pour vous?


@thepio je l'ai comme si c'était ici et sur jsfidddddddddddddddddddddddddddddddddddddddddddddddle. Chaque tag est fermée et essayé beaucoup de choses jusqu'à présent, mais le bug toujours le même


Ce lien que vous m'avez envoyé a des déclarations CSS imbriquées, que vous ne pouvez pas utiliser. C'est pourquoi aucune couleur d'arrière-plan est montrant qu'il a Jsfiddle.


@Lee Vous pouvez simplement choisir parmi les paramètres CSS pour utiliser SCSS et fonctionne. Mais ça ne me dérange pas de quelque manière que ce soit.


Ah je vois, merci pour cette pointe @thepio. Je n'utilise pas SCSS. Hmm étrange, il doit y avoir quelque chose de spécifique sur la machine / la configuration des affiches qui le font. Ne semble pas être un bug.


Désolé @lee, je n'ai pas mentionné que j'utilise SCSS. J'ai tout essayé et je ne peux pas sortir de ce bug. J'ai des pages et des pages mises en œuvre et est la seule section où j'ai eu ce problème.


@Lee je suppose que j'ai trouvé le problème, mais c'est si étrange ... le dernier composant de mon corps (en utilisant réagir) aura ce bug - je ne sais toujours pas pourquoi. Si vous avez eu une div avec du texte aléatoire comme "asd" sur le bas, ce composant cessera d'avoir ce bogue. Ne me demandez pas pourquoi, cause est une bonne question!


Ce bogue de rendu de chrome est toujours présent. Exemple très simple ... jsfiddle.net/tmonster/0kajkol


3 Réponses :


0
votes

Essayez d'ajouter de l'arrière-plan: transparent sur les divs que vous souhaitez que le fond gris apparaisse sur


1 commentaires

J'ai juste une DIV sur le dessus de celui qui a la couleur de fond (celle qui contient l'entrée et le bouton). Je l'ai défini transparent et rien n'a changé. J'ai déjà essayé de fixer l'arrière-plan dans d'autres divs et le problème toujours le même.



10
votes

J'ai aussi ce problème et j'ai trouvé ceci: http : //www.parallaxinfotech.com/blog/addressing-css-artifacts-Left-screen-chrome

a essayé la solution ... -webkit-transformer: translate3d (0,0,0); dans la règle où je spécifie arrière-arrière-couleur ( corps , dans mon cas) et cela a fonctionné. Toujours à la recherche d'une meilleure solution.

Mise à jour: On dirait que ceci est un Bug de chrome . Si vous voulez le résoudre pour tous vos visiteurs, le piratage ci-dessus semble fonctionner. Si vous souhaitez le résoudre pour juste vous, vous pouvez aller à chrome: // drapeaux / # activer-gpu-rasterization et activer la rasâtre GPU. J'imagine que ce bogue sera résolu par l'équipe chromée assez tôt, j'ai donc décidé de ne pas utiliser le hack.


2 commentaires

TRADUCTE3D fonctionne! Mais il arrive également de tourner toute position: éléments fixes en position: absolu, de sorte que ce genre de ruine pour moi. Chrome, le nouveau IE6


Merci beaucoup! Nous avons déchiré nos cheveux sur celui-ci.



1
votes

J'ai géré le même problème.

J'ai remarqué que si vous ajoutez une bordure à l'élément où la couleur d'arrière-plan est appliquée, la boîte lumineuse disparaît.

si elle ne gêne pas avec votre conception, je suggère d'ajouter une bordure de la même couleur que votre arrière-plan.

dans votre cas: xxx

ou, Si vous vous sentez aventureux, essayez un fond (presque) transparent avec un clip arrière-fond: la boîte de rembourrage. Votre transparence doit être> 0 pour que le piratage fonctionne. Je mets la mienne à 0.01 et cela fait l'astuce (c'est-à-dire RGBA (240, 240, 240, 0,01).


0 commentaires