Develop Reference

pointer-events: "auto" in child element not reversing parents "none" on mobile

A child div with "pointer-events: auto" does not receive any events when parent has "pointer-events: none" on mobile. Same thing works perfectly on desktop browsers. Why is that?
Here's my setup:
HTML
<div class="top">
<div class="top-content">
<p>top content</p>
</div>
</div>
<div class="bottom">
<div class="bottom-content-positioning-helper"></div>
<div class="bottom-content">
<p>bottom content</p>
</div>
</div>
CSS
.top {
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 500;
overflow: auto;
}
.top-content {
background-color: red;
width: 100%;
height: 600px;
text-align: center;
}
.bottom {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
pointer-events: none;
}
.bottom-content-positioning-helper {
background-color: yellow;
width: 100%;
height: 150px;
display: inline-block;
vertical-align: top;
opacity: 0.5;
pointer-events: none;
}
.bottom-content {
background-color: green;
width: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
pointer-events: auto;
}
The two parent divs "top" and "bottom" with are stacked vertically. Both have a content div nested inside that is larger in height than their parent. As both parents also have "overflow: auto", they scroll their content. Nothing special until here.
When scrolling "bottom-content", it covers "top" until its middle and then crops any further scrolling.
In order to still be able to scroll "top-content" with a cursor in the lower half of "top", (while "bottom-content" is at scroll position 0), "pointer-events: none" and "auto" are used on "bottom" and "bottom-content".
Please check out my JSFiddle to better understand what's happening here.
Everything is working just fine on desktop browsers. But not at all on mobile. I tested it:
within a cordova app on iOS and android
on chrome and safari on iOS
on chrome on android
On mobile "bottom-content" is not scrolling, as it is not receiving any events. Even though, it is explicitly told to do so with "pointer-events: auto"...
Any hint much appreciated!

Ok, I still don't know why this is happening, but I found a way around it. I now read the touch events on the "bottom" element and reapply them to the scrollTop() property of THE SAME element via javascript. This sounds a bit weird, as this should be happening on its own, but it totally works! And the performance impact is minimal.
var lastScrollTop = 0;
var startY;
$(".bottom-content").on("touchstart", function(e){
//necessary for mobile browsers
startY = e.originalEvent.touches[0].clientY;
lastScrollTop = $(".bottom").scrollTop();
});
$(".bottom-content").on("touchmove", function(e){
//necessary for mobile browsers
var currentY = e.originalEvent.touches[0].clientY;
var scrollDistance = startY - currentY;
$(".bottom").scrollTop(scrollDistance + lastScrollTop);
e.preventDefault();
});
Here's the updated JSFiddle. Make sure to check it on desktop and on mobile again!

Android Browser stretches image

The site I am talking about is currently live. It works quite well for me. There is just one mistake that drives me crazy:
On the standard Android Browser (tested on 4.1.2, LG), the logo is stretched and resized in a very bad way. You can see a demo below.
The CSS for positioning and sizing the logo is quite simple, using position: absolute on a position: fixed element:
Markup
<div class="fixed">
<div id="logo">
<a href="logo-link">
<img src="logo.jpg" height="55" width="34">
</a>
</div>
</div>
CSS:
* {box-sizing: border-box} /* bootstrap system */
.fixed {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
height: 85px;
}
.logo {
width: 85px;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
}
img {
margin: 20px 27px;
max-width: 40px;
height: auto;
display: inline-block;
}

Working blind because I don't have that browser, but I suspect the issue will be the right:auto bottom:auto.
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 85px;
}
#logo {
width: 85px; height:85px;
position: absolute;
top: 0;
left: 0;
background-color:pink;
}
#logo a { display:block; width: 85px; height:85px; }
img { margin:15px 25px; }
Since the width is known, try replacing auto with the actual numbers.
Here is a Fiddle: https://jsfiddle.net/mnkx66zj/
You should also want to increase the clickable area on your link by making logo-link display block, and make it equal to parent size.

My FF DE44+ inspector says that the parent <a> is sized 0x24 and the <img> sized 240x164 (which are inline values). The parent has no z-index while the image has z-index: 1500.
It seems to me that the android browser has no width and height parent values it can reference while while the bottom: auto and right: auto forces it to do.
Further more, looking at the code of the 'live' site there is more to it than you are claiming in your question, because you give the values of the small image but the CSS of the big one (which also has left: auto, while the small one has no bottom, left, right at all).
You better take another good look at your code and revise the code in your question to reflect the code of the 'live' version, otherwise we will not be able to properly help you.

Padding On Tablet Device

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.

Misformatted contents in accordion panel - Android

I am using a simple jQuery/CSS accordion panel for a mobile website (coded as a flexible design with a few media queries thrown in). It's behaving as expected in most of the browsers I've been able to test, but there is a bug within the accordion in the default browser on my Android device (Galaxy Nexus, Android 4.2.2). When I open a panel, all of the contents jump into a weird formatting layout, but if I click on another panel or close the open panel, all of the contents jump into the layout I expected them to have.
The script:
$('.accordion > .heading > a, .accordion > .heading').on('click', function () {
var $next = ($(this).is('a') ? $(this).parent().next() : $(this).next());
$next.slideToggle();
return false;
});
The CSS:
.accordion {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.accordion .slidepanel {
background: #f6f6f6;
display: none;
margin: 0;
padding: 3%;
position: relative;
}
I have tried setting the panels to be open by default and all of the formatting within is as expected. I have racked my brain trying to figure out a fix for Android -- anyone out there got some other ideas?

Simple answer found after hours of this headache:
.accordion .slidepanel {
background: #f6f6f6;
display: none;
overflow: hidden; <<---
margin: 0;
padding: 3%;
position: relative;
}
Something to do with the height and width that the .slideToggle(); needs to calculate while it's doing its magic...

Fixing absolute positioning in Android

I have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE?
Here is my website and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.
Now I realize why this is happening, it's because they are both absolutely positioned and obviously the margin-left is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers.
#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
#fff; border: 1px solid #b4b4b4; }
<h1 id="site-title"><span>Heavens Gate Winery</span></h1>
<div id="banner">
<img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
</div>
I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated.

When you need to position elements with absolute positioning you should almost always do so inside a relative positioned element.
<div style="position:relative;"><div style="position:absolute;"></div></div>

Although this is not the problem described there, the Android browser has another issue regarding absolute positioning; absolutely positioned DIVs disappear. The solution Paweł Komarnicki found is -webkit-backface-visibility: hidden:
<div style="position: relative">
<div style="position: absolute; -webkit-backface-visibility: hidden">
</div>
</div>

My problem is in my Android (Samsung) that unless the other answers, left: in px gives the right position (absolute) but left: in % goes to position 0. Even e.g.
left: 10px;
left: 20%;
goes to position 0, calc() does not work either in left:, but works in width in a limited way.
So I think % does not work for left: in an Android. So I thought in the above problem left:50% was the problem, I am wondering it was solved with position relative / absolute. I did the same but no solution! No difference either when using -webkit-backface-visibility!
The solution: in stead of left: 17%, use left: calc(17%) and the other fixed px for left: are taken, but % does not work!!!

I did some testing that I suppose is relevant to this question. I wanted to center a SVG element inside a div.The code was not rendered correctly in Android 4.2.2. Now when I change translate to translate3d the problem is fixed. I've a made a piece of code that you can see both translate and translate3d side-by-side. My Android browser only renders the translate3d version correctly; possibly because of forced hardware acceleration. Note that I used a tiny Javascript code to copy the svg from one div to another. Here's the code snippet and the codepen:
Codepen: https://codepen.io/ehsabd/pen/yxOPOe
document.getElementById('test-translate3d').innerHTML = document.getElementById('test-translate').innerHTML;
#test-translate, #test-translate3d{
background: lightgray;
margin:20px;
float: left;
position:relative;
padding:100px;
}
#test-translate svg, #test-translate3d svg{
position:absolute;
width:100px;
left: 50%;
top: 50%;
}
#test-translate svg{
-webkit-transform: translate(-50%,-50%);
}
#test-translate3d svg{
-webkit-transform: translate3d(-50%,-50%,0);
}
<!--I've tested this on Android 4.2.2 native browser and I've seen that the first heart from left (which uses translate is not centered but the second heart (translate3d) is appropriately centered)-->
<div id="test-translate">
<svg
id="svg19871"
sodipodi:docname="remigho_like(paths).svg"
viewBox="0 0 604.96 556.17"
version="1.1"
inkscape:version="0.48.5 r10040"
>
<g
id="layer1"
inkscape:label="Calque 1"
inkscape:groupmode="layer"
transform="translate(-69.568 -427.74)"
>
<path
id="path18741"
sodipodi:nodetypes="csscssccc"
style="color:#000000;stroke:#000000;stroke-width:53.15;fill:none"
inkscape:connector-curvature="0"
d="m586.75 734.03c37.196-28.491 61.2-73.36 61.2-123.83 0-86.088-69.799-155.89-155.89-155.89-48.272 0-91.426 21.952-120.02 56.407-28.592-34.455-71.746-56.407-120.02-56.407-86.088 0-155.89 69.799-155.89 155.89 0 50.469 24.003 95.338 61.2 123.83l214.72 223.3z"
/>
</g>
</svg>
</div>
<div id="test-translate3d"></div>