4

我想不通这个。我在 ios7 上使用 phonegap。我有一个页面容器，我在其中放置页面元素。我有选择元素，它使用默认的 ios7 选择列表事物。选择获得黑色背景 - 因此无法阅读文本。如果我从我的 css 中删除 glb_pagecontainer 和页面，则选择列表会变得透明。所以问题似乎出在glb_pagecontainer 与页面的结合上？

#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div id="glb_pagecontainer">
    <div class="page" id="pageid">
        <div class="row row1" style="margin-top:50px;">
            <section class="col">
                <div class="input">
                    <select id="theid" class="inputpicker" style="text-indent: 92px;">
                        <option>one option</option>
                    </select>
                </div>
            </section>
        </div>
    </div><!-- End page -->
</div><!-- End glb_pagecontainer -->
4

5 回答 5

10

It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.

One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.

For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:

[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m

and comment out or delete the following line:

theWebView.backgroundColor = [UIColor blackColor];

This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.

于 2013-10-08T15:50:40.810 回答
1

有一个非常可爱的插件，可以让您设置 Web 视图的背景颜色 - 甚至在运行时动态设置。

它为我解决了这个问题。

https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin

于 2014-02-12T14:35:51.693 回答
0

正如OP在评论中提到的那样，添加

高度=设备高度

元视口为 iOS 7.0.x 修复了此问题，它已在 7.1 上修复。

于 2014-07-23T23:17:33.947 回答
0

如果从 select 元素中删除以下内容会发生什么？

text-indent: 92px;
于 2013-10-02T14:09:28.490 回答
0

把这行代码放到css中

html { -webkit-tap-highlight-color: transparent;}
于 2016-11-21T14:21:27.243 回答