I'm migrating a web map from OL2x to OL3. I've started with the OpenGeo web app builder (thanks, Boundless!) and have a functional map.... except for the layerswitcher on Chrome and Firefox on my Android phone and tablet. My map has a large-ish number of layers and so the layerswitcher needs to be scrollable for the user to see all of the layers. The scrolling behavior is working as expected on Chrome and Edge on a Windows Desktop machine. I have a temporary version of the app here: http://rainpursuit.org/ol3/
Here's the CSS that I've tried for the LS "container"
.layer-switcher {
position: absolute;
top: 3.5em;
right: 0.5em;
text-align: left;
}
And for the "layer-tree-panel"
.layer-tree-panel {
padding-right: 50px;
border: 1px solid #cccccc;
background-color: white;
height: auto;
max-height: 500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
opacity: 1;
z-index: 0;
translateZ: (0);
-webkit-translateZ: (0);
}
Any suggestions on how to make this scrollable on touch devices that don't have a mouse to hover over the LS divs?
Thanks
I believe the web map builder uses an early version of the ol3-layerswitcher, see this issue which resulted in scrolling being fixed on touch devices. The examples in the repo include one for scrolling.
Related
I'm seeing an odd bug where scrolling in one direction occasionally scrolls my webview in the opposite direction. You can see in this gif:
You can see it starts scrolling down then scrolls back up - that second part that scrolls back up is the bug, I actually swiped to continue scrolling down. This problem is hard to reproduce so that snippet is the best I could get in a recording. This isn't reverse scrolling because it's only happening in one particular scrollable list in the app, and it's inconsistent. The app is a cordova app so it's HTML/CSS/JS running in a webview, and I use this webview plugin with the webview scroll disabled. I'm not sure if it's a CSS problem because I've deactivated all the CSS of the list and the list items and the problem still happens. This is the CSS of the parent <ul>:
padding: 12px 15px 15px;
background-color: #fff;
min-height: 100px;
margin-bottom: 30px;
position: relative;
list-style: none;
This is the CSS of each child <li>:
margin-top: 20px;
margin: 5px 0;
position: relative;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3D(0, 0, 0);
word-wrap: break-word;
zoom: 1;
I've not been able to reproduce the problem outside the app. Any help/ideas will be appreciated, thanks!
I have run into a very strange and incredibly annoying rendering bug in the Android WebView. I have tested this in a bunch of other browsers both on the computer and on my phone, and it does what its supposed to, but not in the WebView.
The blue box should be the same height as the header (30px) with text vertically centered in it, but instead, it is rendered as 25px. The only fix I've found, which doesn't make any sense, is to set the line-height of the blue box to 35px only on Android WebView, but this is a terrible hack.
css
body { margin: 0; }
#header {
height: 30px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#button {
float: right;
line-height: 30px;
background-color: blue;
color: wheat;
vertical-align: middle;
}
html
<body>
<div id="header>
<div id="button"></div>
</div>
</body>
This is caused by the font boosting feature from webkit. There is actually a bug assigned to your problem: Bug 84186
Having the same problem as you, I actually created a javascript library that tries to fix the issue automatically. Be warned though, it's still in BETA status.
I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.
It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.
I have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.
Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.
It works fine on all other mobile and desktop browsers I tested on.
I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?
Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/
The minimal test case:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Css:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
UPDATE: It looks like the problem is solved in Firefox 27.
After a lot of searching I found a workaround here:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
Adding a background and opacity: .99 to the container element seems to solve the problem.
But still no information about what causes the problem
I tried the opacity: .99 hack but it was causing the layout to get pushed down..
so i tried another hack which i find that worked by applying this to your style sheet:
* {
outline: 1px solid transparent;
}
I'm sorry, but I seems found a more simple solution.
Without layout damage.
If scrolling container has height a more over than device height then this issue disappearing.
It's has a different values for portrait and landscape orientation.
It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.