Problem of responsiveness in chrome.

[EdvaldoLima]

I am having problems in chrome so that responsiveness breaks, I have a text that should be centered, but it takes the text at the time of the breakdown of responsiveness.

Print in Chrome:

Print in FireFox:

The problem only occurs on mobile devices, I did the same test on physical device and gave the same problem.

Chrome version: 60.0.3112.113 (Versão oficial) 64 bits.

[oliveirafilipe]

Thank you, @EdvaldoLima, we will check this issue. Responsiveness is always the devil. I will keep you updated

[menosprezzi]

Hello, @EdvaldoLima. You're trying to focus the walkthrough in your Title ('Sis capta'). And it seems like that element is hided on your first case's printscreen. It's a default behavior of your layout? At Walkthrough, we still have some problems when we call walk to an display: none element, we dont have a fallback implemented yet.

Thank you to contribute and choose our plugin!

[EdvaldoLima]

Hello @menosprezzi, no, the normal behavior of the layout is in the second image, in the first image the text "Sis Capacita" is pushed to the right so as to be hidden.

[oliveirafilipe]

@EdvaldoLima , when the "Sis Capacita" is pushed to the right to be hidden, are you just using a position: absolute with a left value or using a display: none too?

[EdvaldoLima]

@oliveira-filipe no, I believe it's a centralized text, I'm using http://materializecss.com/navbar.html

[oliveirafilipe]

@EdvaldoLima, vou partir para o português para podermos achar uma solução da melhor maneira possível. Tentei reproduzir o erro na mesma versão do chrome utilizando esse template do materialize: http://materializecss.com/templates/parallax-template/preview.html

Entretanto o Material Walkthrough se comportou como o esperado, apesar da quebra do título devido ao pouco espaço da navbar.

Poderias mandar um print como este? Colocando o foco do inspecionar no elemento que tu colocaste como step do walk?

Muito Obrigado!

[EdvaldoLima]

@oliveira-filipe e eu achando que vocês eram tudo gringo kkkkkk.... Acabei de identificar o problema, o erro não foi reproduzido pra você porque a navbar não está fixa, ao usar o

<div class="navbar-fixed">

o erro é reproduzido, identifiquei o css da class:

.navbar-fixed {
  position: relative;
  height: 56px;
  z-index: 997;
}

To sem tempo pra dar uma olhada, mas com o problema identificado já temos meio caminho andado.

[menosprezzi]

Comittado as alterações que possivelmente irão solucionar o problema. @EdvaldoLima pode testar no teu ambiente para nós e dar o aval?

Relatório das mudanças: O erro ocorria pois o elemento .navbar-fixed nav orienta-se com position: fixed, o que acaba utilizando o width do root para cálculo de tamanho. O walkthrough possui um elemento walk-wrapper que é responsável por ter os estilos que deixam a borda colorida com aquele efeito de fullscreen, crescendo com um tamanho de 300vw. Isso acabava distorcendo o tamanho do conteudo horizontalmente, afetando o tamanho da janela (mas era despercebido pois o walk tranca o scroll do usuário) e elementos fixed se perdem com isso. A solução foi embrulhar o walkthrough com um elemento que possui o tamanho da janela do usuário, limitando o overflow da borda colorida. Para esta versão 1.0, essa solução acaba limitando bem mais a possibilidade de implementarmos um walkthrough que funcione tanto em paginas verticais quanto horizontais. Na nossa versão 2.0, devemos realizar os cálculos de posição do walk não mais pelo offset (baseado no documento) e sim pelo clientRect (baseado na visão da janela), o que vai solucionar problemas desse tipo.

[menosprezzi]

@EdvaldoLima realize os testes utilizando os arquivos não minificados. Iremos disponibilizar os minificados com a versão 1.1 com estas alterações se acaso resolver :smile:

[EdvaldoLima]

@menosprezzi o problema foi solucionado, muito bom, obrigado.

[oliveirafilipe]

@EdvaldoLima se puderes, quando publicares o teu trabalho nos mande o link, ficaremos muito felizes de ver o plugin em ação

[EdvaldoLima]

@oliveira-filipe com toda certeza, ótimo trabalho vocês estão fazendo.

[oliveirafilipe]

Changelog: The error occurred because the .navbar-fixed nav element is oriented with position: fixed, which ends up using the width of the root for size calculation. The walkthrough has a walk-wrapper element that is responsible for having the styles that leave the border colored with that fullscreen effect, growing with a size of 300vw.

This ended up distorting the size of the content horizontally, affecting the size of the window (but it was unnoticed because the walk locks the user's scroll) and fixed elements get lost with it. The solution was to wrap the walkthrough with an element that has the size of the user window, limiting the overflow of the colored border.

For version 1.0, this solution ends up limiting much more the possibility of implementing a walkthrough that works in both vertical and horizontal pages. In version 2.0, we must perform walk position calculations no longer due to offset (based on the document) but rather by clientRect (based on window view), which will solve such problems.