Redactor: Não é possível rolar após visualizar a fonte HTML

Criado em 24 jan. 2019  ·  17Comentários  ·  Fonte: craftcms/redactor

97

Já reportado, mas fechado por inatividade.

Estou tendo exatamente o mesmo problema aqui, mas a barra de rolagem não desaparece, simplesmente não funciona.
Redimensionar a janela faz com que funcione até eu rolar novamente.

Nenhum erro dentro do console do navegador.

Mesmas etapas para reproduzir:

  1. Habilite o plugin de origem html ( _button?_ ) para o campo redactor
  2. Cole texto suficiente para que a barra de rolagem apareça
  3. Mostrar fonte html do texto colado
  4. Rolar para baixo
  5. Depois de rolar para baixo, a barra de rolagem desaparece (_ não é para mim _). O usuário não pode rolar para cima - ao tentar, as páginas "saltam" um pouco para cima e depois voltam para a posição anterior. Todos os botões do redator desaparecem.

A única coisa aqui é que eu tenho uma formatação personalizada adicionada à minha configuração do redator, mas depois de alguns testes, isso não faz diferença.

Criar CMS 3.1.3
Redator 2.3.0

Comentários muito úteis

@angrybrad

https://streamable.com/f6we5

(A espera antes de tentar clicar na barra de rolagem sou eu tentando rolar com o mouse)

Todos 17 comentários

Ainda não consigo reproduzir isso, mas acabamos de lançar a versão 2.3.2 que inclui uma versão mais recente do Redactor. Isso provavelmente está corrigido agora, mas me avise se não estiver.

Acabei de atualizar para a versão mais recente e o bug ainda está aqui!

Aparentemente está corrigido no Firefox, mas ainda está aqui no Chrome 72.

Estou em um sistema Windows 10.

Você pode reproduzir este bug em https://imperavi.com/redactor/ ?

Eu tenho o mesmo problema usando o Windows 10 na versão mais recente do chrome. Versão mais recente do craft e a versão mais recente do plugin. Se eu mudar para a visualização de código, o html aparece, mas ao rolar ele imediatamente move a barra de rolagem para a parte inferior e mostra apenas uma caixa preta em branco e a barra de rolagem fica congelada. Percebi na página imperavi acima, se eu adicionar a mesma quantidade de texto e alternar entre as visualizações, a visualização de código terá uma grande quantidade de espaço preto abaixo do código, ou seja, o editor manteve a mesma altura que o modo de texto. Eu estou querendo saber se isso talvez seja parte do problema. Atualmente é impossível usar o modo de código.

Também notei que isso ocorre apenas ao alternar de uma visualização de texto longo para a visualização de código. Se você tiver um campo de redator vazio e alternar para a visualização de código e colar no código, a barra de rolagem funcionará bem dentro do campo.

@lettie16 você pode reproduzir este bug em https://imperavi.com/redactor/ ?

Você pode reproduzir este bug em https://imperavi.com/redactor/ ?

Olá Andris,

Não, não posso replicá-lo neste site. Mas eu não acho que isso seja uma comparação semelhante, acredito que tenha algo a ver com a forma como está interagindo com o campo de cms de artesanato. como mencionei acima, se você tiver um campo limpo e vazio, colando na visualização de código funciona bem, mas a barra de rolagem está dentro da edição como este editor.

Se você colar muito texto na visualização de texto e, em seguida, alternar para a visualização de código, o problema ocorre e a barra de rolagem aparece fora do editor, ou seja, rola todo o painel de campo, não apenas o editor, exceto porque ele congela.

Acho que talvez tenha algo a ver com a forma como o código está recalculando a altura do editor depois de alternar entre as visualizações.

Tendo dificuldade em reproduzir isso no Windows 10, Chrome 72 e na versão mais recente do Craft 3 e Redactor. Alguém pode gravar um vídeo rápido do comportamento caso eu esteja perdendo um passo em algum lugar?

@angrybrad

https://streamable.com/f6we5

(A espera antes de tentar clicar na barra de rolagem sou eu tentando rolar com o mouse)

@timoteh hrm ... talvez tenha algo a ver com estar dentro da Matrix/Super Table? Você pode enviar seu arquivo composer.json e um dump de banco de dados para [email protected] e fazer referência a esse problema e nos apontar para a entrada/campo no vídeo que você usou?

Tentei usá-lo fora de uma Matrix/Super Table e o resultado é o mesmo.

@angrybrad , pronto!

@timoteh Inicialmente consegui reproduzir isso depois de algum tempo, mas voltando a ele não consigo mais. Você pode ter certeza de que está no Chrome/Reactor e Craft mais recentes e ver se ainda é um problema para você?

@angrybrad
Acabei de tentar no Chrome, continua o mesmo.

Google Chrome
Versão 73.0.3683.103 (compilação oficial) (64 bits)
Criar CMS 3.1.23
Redator 2.3.2

@timoteh talvez tenha algo a ver com o tamanho da tela/resolução? você está rodando com o navegador maximizado e em qual resolução?

@angrybrad Sim, maximizado, mas mesmo quando tento brincar com o tamanho da tela, sempre obtenho o mesmo resultado. Eu tentei reproduzi-lo em várias configurações do Craft 3 e sempre consigo!

Meus colegas de trabalho no iOS não conseguem mais reproduzi-lo, então aqui está minha configuração:
image

Além disso, e você @lettie16 ?

Também vendo esse problema no Win10 + Chrome 74.0.3729.131 + Craft 3.1.25 + Redactor 2.3.3.2

Percebi nas ferramentas de desenvolvimento que algo no javascript parece estar preso em um loop infinito, pois ele começa a definir esse div como "display: none" repetidamente:

<div class="redactor-styles redactor-in redactor-in-0" dir="ltr" aria-labelledby="redactor-voice-0" role="presentation" contenteditable="true" domtargetshow="" style="display: none;">

Mais algumas notas:

  • Parece que o javascript está forçando o elemento rolável a rolar até o final.
  • Ele para se eu clicar em uma guia de layout de campo diferente (ou seja, ocultando o campo do redator).
  • Com uma postagem mais longa, parece não ser acionado imediatamente na rolagem - eu tenho que rolar para baixo uma certa quantidade antes que o bug apareça.

Encontrou uma solução CSS para isso, impedindo que o div contenteditable que contém o conteúdo WYSIWYG seja definido como display: none quando o div de origem estiver visível, o que, por sua vez, parece impedir que o Redactor entre em um loop infinito . Adicione este CSS ao seu CP:

.redactor-source-view [contenteditable="true"] {
    display: block !important;
    height:0 !important;
    width:0 !important;
    padding:0 !important;
    overflow: hidden !important;
}

Testando no Chrome e Firefox mais recente no Mac e no Chrome no PC.

Você pode testar com este prático plugin para adicionar CSS ao painel de controle: https://github.com/doublesecretagency/craft-cpcss

@croxton obrigado pela correção! Como ainda não estou conseguindo reproduzir, só vou contar com isso :)

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

davist11 picture davist11  ·  13Comentários

diluno picture diluno  ·  3Comentários

lindseydiloreto picture lindseydiloreto  ·  3Comentários

lindseydiloreto picture lindseydiloreto  ·  10Comentários

stenvdb picture stenvdb  ·  16Comentários