Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

11 2017 fevereiro

overflow: hidden no Safari do iOS

Autor: Carlitos em CSS

Está tendo problemas com overflow: hidden no Safari? No meu caso estou criando uma tabela com scroll horizontal em telas menores porém, com este problema, ficava um espaço horizontal vazio correspondente a largura total da tabela.

Para resolver isso basta usar position: relative no elemento desejado, ficando desta forma:

elemento { position: relative; overflow: hidden; }

Se você precisa retirar os cantos arredondados (ou outras características do padrão visual destes elementos) no iOS, é só usar o código abaixo:

textarea, input[type=”text”], input[type=”button”], input[type=”submit”] { -webkit-appearance: none; border-radius: 0; }

Importante: o ideal é não utilizarmos os prefixos (-webkit-) em nosso código, então uma boa dica é usar PostCSS para fazer isso automaticamente.