11
respostas

Bug de Renderização no Google Chrome em site criado com Angular 8 e Bootstrap 4

Olá pessoal,

Estou com um problema em um projeto implementado em Angular 8 com Bootstrap 4, onde em computadores com placa de videos e em dispositivos celulares mais recentes roda normalmente sem problema algum. Mas em computadores sem placa de vídeo acontece um bug no Google Chrome onde todo "1" acaba renderizando 2x, aparecendo como se fosse "11". Nos mesmos computadores, abrindo pelo Internet Explorer, o problema não ocorre. Será que é algum tipo de incompatibilidade com o Bootstrap 4 e o Google Chrome?

11 respostas

Fala ai Jhoni, tudo bem? Esse parece ser um bom problema bem específico, acredito que não envolva incompatibilidade entre Bootstrap e Chrome.

O mesmo pode estar acontecendo por N motivos, consegue compartilhar o projeto comigo? Assim eu consigo tentar simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

Olá Matheus, tudo certo e você? O repositório desse projeto no GitHub é privado, mas me passa qual é o seu usuário no GitHub que aí te envio o convite como colaborador. Grato pela disponibilidade em me ajudar nessa questão.

Fala Jhoni, meu usuário é @mahenrique94.

Me adiciona que eu dou uma olhada, se possível, me explica como faço para simular o problema, assim eu consigo repetir os passos aqui.

Abraços e bons estudos.

E aí Matheus, como vai? Bacana cara, já te adicionei como colaborador no projeto do Github, agora basta clonar ele em uma máquina que não tenha placa de vídeo, instalar os pacotes pelo npm install e rodar no Google Chrome. Pois é somente no Chrome que acontece esse problema, especificamente em máquinas sem placa de vídeo. Mais uma vez, grato pela ajuda. Abraços.

Fala ai Jhoni, tudo bem? Finalmente consegui tempo para ver o projeto, não estou achando ele no Github, talvez eu ainda não tenho acesso.

Consegue me enviar o link dele?

Abraços e bons estudos.

Olá Matheus, segue o link https://github.com/jhonieldor/lscommerce-app/commits/master

Fala Jhoni, por algum motivo acabei arquivando seu email e não vi a resposta.

Tentei acessar o problema no Github mas está dando erro dizendo que o convite expirou (claro eu demorei dois anos para ver).

Consegue me convidar de novo?

Peço desculpas pela falha e não ter respondido anteriormente, só vi agora quando chegou outro email para mim.

Espero ter ajudado.

Olá Matheus, sem problemas, acabei de enviar o convite novamente. Eu fiz algumas alterações no template para melhor adaptação da aplicação nesses casos de exceções. O bug do Chrome onde todo um ("1") renderizava duas vezes, após a atualização do navegador no computador onde ocorria esse problema, foi resolvido. Mas ainda assim o Chrome apresenta um comportamento indesejado no TWO-WAY-DATABIDING do Angular, onde não atualiza as informações na página. Para reproduzir esse teste, basta acessar o link https://prosaude-homolog.herokuapp.com/ , acessando com o login de email : jhonieldor@gmail.com, e senha: 1234. Vai aparecer a mensagem de boas vindas, e a opção de "Ver Produtos". Ali verá as opções de incluir e informar a quantidade dos produtos no carrinho de compras logo a partir da página inicial. A partir dessas ações é que em alguns computadores o problema fica evidente, especificamente nos computadores sem placa de vídeo. Já no Chrome, acessando do notebook que trabalho(com placa de vídeo) e no nave meu celular, esse problema não ocorre.

Fala Jhoni, realmente fiz os testes aqui e funcionou sem nenhum problema.

Isso porque eu tenho placa de video externa além da interna.

Preciso ver onde posso testar e simular esse problema, aqui em casa todos os computadores tem placa de video, talvez fim‑de‑semana eu consiga testar em outro (peço que você aguarde).

Já aceitei o convite, só preciso clonar e tentar subir o projeto local.

Esse erro é bem estranho, nunca vi acontecer (com ou sem placa de video), fiquei curioso.

Obs: Parabens pela aplicação, está ficando muito boa, mandou bem.

Espero ter ajudado.

Ok, Matheus, agradeço pelo seu feedback a respeito da aplicação e também pela sua disponibilidade em ajudar. Apesar que, tive que dar um outro jeito para contornar esses problemas, criando um gerenciamento de estado no status dos produtos no serviço do carrinho de compras. Assim eu forço a atualização dessas informações na página sem ficar dependendo 100% do two-way-databinding do Angular, e sem comprometer a performance da aplicação também.

Boa Jhoni, fico feliz que tenha resolvido seu problema.

Nesse caso como é algo que está versionado no Git, tá para voltar para a versão com bug, então assim da pra simular o problema.

Abraços e bons estudos.