Chris chamadas sombras de rolagem um de seus truques CSS favoritos de todos os tempos. Lea Verou popularizado a abordagem CSS pura usando gradientes de fundo em quatro camadas com alguns recursos inteligentes background-attachment Magia. O resultado é uma interação de rolagem inteligente que dá aos usuários uma dica de que conteúdo adicional está disponível em um contêiner rolável.
Só um problema: é quebrado no Safari iOS 13. Um dia estava tudo bem. O próximo, nem tanto. E essa não foi a única coisa afetada. Efeito de paralaxe somente CSS de Keith Clark também parou de funcionar naquele momento.
Bem, leitor Ronald escreveu em para dizer que tudo está funcionando mais uma vez! Na verdade, estou escrevendo isso no meu iPad (Safari 15.5) agora e a demonstração de Chris está mais nítida do que nunca. Assim como o de Keith demonstração original.
Então, o que quebrou? Ainda não sabemos. Mas o Notas de lançamento do Safari 13 oferecer pistas:
- Adicionado suporte para rolagem acelerada com um dedo para todos os quadros e
overflow:scrollelementos eliminando a necessidade deset-webkit-overflow-scrolling: touch.- Alterado o comportamento padrão no iPad para páginas da web amplas com metatags responsivas que exigem rolagem horizontal. As páginas são dimensionadas para evitar a rolagem horizontal e qualquer texto é redimensionado para preservar a legibilidade.
Quando foi corrigido e o que foi corrigido? Bem, no lado da sombra de rolagem, o Safari 15.4 incluído algum trabalho em background-attachment: local isso pode ter funcionado. No lado da paralaxe, Safari 14.1 adicionado suporte para propriedades de transformação individuais... então talvez isso?
