Largura do webkit não está atualizando?
-
10-07-2019 - |
Pergunta
Eu tenho um pedaço de código que é executado na redimensionamento da janela. Estou puxando o width
, e as outerWidth
de um elemento de texto de entrada.
Esse processo funciona bem em todos os navegadores, exceto o webkit, que retorna o resultado adequado de outerWidth
, mas o resultado de width
nunca muda do On Load Original.
Esta é a saída real do console do meu script ao redimensionar a janela do navegador (este é o Chrome, mas o mesmo acontece no Safari 4):
outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772
Alguém já experimentou isso antes? Você sabe por que isso acontece? E o mais importante, você sabe como contornar isso? :)
Obrigada.
Solução
Aqui está o meu caso de teste. Ambos parecem funcionar como esperado (Safari 4).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
input {
width: 50%;
height: 2em;
font-size: 1em;
}
</style>
</head>
<body>
<p>
<input type="text" id="w" />
</p>
<p>
<input type="text" id="ow" />
</p>
<script type="text/javascript">
function init(){
$('#w').val($('#w').width());
$('#ow').val($('#ow').outerWidth());
}
$(function(){
init();
$(window).resize(function(){
init();
});
});
</script>
</body>
</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow