小编And*_*ens的帖子

我将以下CSS转换应用于HTML输入框.

-webkit-transform: scale(.5);

当我在输入框中键入文本直到它填满可见区域时,插入符号继续经过输入的边缘并被隐藏.通常,插入符号和文本会在您键入时滚动.

一旦插入符号超出了预缩放输入的宽度,文本最终会开始滚动.在计算何时滚动文本时,浏览器似乎忽略了缩放.

这只是WebKit浏览器的问题(使用Chrome和iPad测试).-moz-transform等效在FireFox中运行良好.zoom属性在webkit中运行良好,但在iPad上缩放时它不够平滑,所以我不能真正将它用于我的项目.

你可以在这里看到一个例子:http://jsfiddle.net/4Kv6w/

第一个输入框带有-webkit-transform缩放.第二个框是缩放设置.第三是正常的.

任何帮助将不胜感激.

编辑 - 通过使用-webkit-transform将输入框移动到左侧,您也可以在不缩放的情况下解决问题.这是一个例子:http://jsfiddle.net/4Kv6w/15/

将TextBox放在具有水平滚动的ScrollViewer内的StackPanel中时，我遇到一些奇怪的调整大小行为。

应该将StackPanel中的项目拉伸到网格列的整个宽度。网格列应占据窗口的一半。

更改窗口大小时，TextBox之后的所有同级项均无法正确调整大小。

这是我的代码的简化版本，它再现了该问题：

<ScrollViewer HorizontalScrollBarVisibility="Auto">
    <Grid>
        <StackPanel Background="Gray" Grid.Column="0">
            <Border Background="Blue" Height="40"/>
            <TextBox/>
            <Border Background="RoyalBlue" Height="40"/>
            <Border Background="Red" Height="40"/>
        </StackPanel>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
    </Grid>
</ScrollViewer>

这是xaml在Windows 10中正确呈现的内容：

如果我调整窗口大小，则TextBox之后的元素无法正确调整大小。如果您尝试几次，它们将自行修复。

如果删除TextBox控件并保留Border元素，则它们的大小都将正确调整。TextBox控件以某种方式打破了其后的边框。我也可以使用数字控件进行复制。

如果我HorizontalScrollBarVisibility="Auto"从ScrollViewer中删除，它将解决此问题。我需要此视图能够水平自动滚动，这样对我不起作用。如果我删除了ScrollViewer，它也会对其进行修复。