The scenario is simple. There's a position:fixed element which is higher than the viewport. If I animate transform:translateY (using CSS animations or JavaScript) it moves but the parts that were outside of the viewport earlier stay invisible and never appear.
The bin contains the same element with position:absolute as comparison. It's working as expected in other browsers.
http://jsbin.com/yonisekawe/5
Any idea on how to workaround this?
I found a feasible workaround that I post as an answer but I'd still like this to get fixed in Firefox.
The workaround is simple: wrap the translated element inside another position:fixed div and position itself absolute.
Before
<body>
<div style="position:fixed;">Look ma, I'm getting translated!</div>
</body>
After
<body>
<div style="position:fixed;">
<div style="position:absolute;">Look ma, I'm getting translated!</div>
</div>
</body>
This will cause the element to get correctly updated while translating without getting cut off.
Related
I have this very simple W3C valid HTML that Firefox for Android refuses to render in 100% view:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Devastacao por lei</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h3>Nothing here</h3>
</body>
</html>
No matter how much I pinch out, Firefox still renders the horizontal scrollbar and allows me to move the text right and left (i.e., scroll the page horizontally). I can zoom in, but I cannot zoom out to the point that I cannot scroll left/right without moving the text/page.
I tried fiddling with the Accessibility settings without luck. Tried with about:config, but it shows nothing.
Chrome renders the page perfectly.
Is this a bug? Maybe this problem happens with my device only...?
EDIT: Bug reported here
This is definitely a bug in Firefox, and only happens when the height of the page is smaller than the device height, that is, when the full page fits in height, AND when "Scroll to hide toolbar" is ON in Settings - Customize.
To check this, just add lines after the <h3>Nothing here</h3> of the form test<br> one by one. You will see the same problem. Keep adding lines until, suddenly, the page does not fit anymore in height. Then the page finally fits in width if pinched out, and everything works just fine.
WORKAROUND:
Just add this line to your HTML:
<div style="height: 101vh;visibility: hidden;"></div>
or, better, adjust the height to your page.
Notice that this will make the scrollbar to appear, and that the page will scroll even if there is "nothing" in the bottom. Setting overflow:hidden; for body or html prevents the workaround from working.
Maybe someone can find a better workaround...?
I am having a problem on android and iPhone versions of HTML5 site using responsive layout.
links are not firing unless I hold down on them for 1 second.
Otherwise they act as if a hover event was taking place.
Example code:
<div class="homepageCarDiv">
<div class="note">
<div class="imgDiv">
**<img src="_imgup/19/thumbnail/Imagen_2.jpg" alt="">**
</div>
<h3>MITSUBISHI ASX<br>ASX 200 DI-D CHALLENGE 4WD (2010)</h3>
<h4>16.500€</h4>
<div class="verDet">
<p>**Ver Detalle**</p>
</div>
<div class="cornerImage">
<img src="images/fold.png" alt="">
</div>
</div>
</div>
Code can be seen at http://20coches.com/index.php.
It works correctly on iPad and desktop.
I am at a loss.
This issue was related to responsive divs and focus rectangles being pushed out of the viewport.
Other sources on the internet suggest that javascript calculations of the dynamic element width causes a silent mouse fail on hover, which results in the link not firing.
I just got tired of beating my head against the VDU, and managed to work around the issue - by clearing every div from its neighbour.
No one ever quite answered this similar question,
Blurry images on stock android browser
So I'm going to post my own version specific to my situation.
The problem is that position:fixed causes child image elements to be blurry in some android browsers. In my case, it causes the stock browser of Galaxy Note v1 running Android 4.0 to experience this issue. Others have said the same thing for some Galaxy S3. Here's my code:
Preview # http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
You'll notice that the OPTIX Testing logo is blurry at first. If you remove position:fixed from the #top-nav-container, then the logo is crisp and clear. So my question is, how do I keep both position:fixed and a crisp logo?
In my real website, the top navigation is supposed to stay fixed while you scroll through the site. I tried using position:absolute and using javascript to reposition the top navigation on scroll, but that caused a whole bunch of jumping/flickering effects. So if I can't use position:fixed or position:absolute to fix the top navigation to the top of a mobile web browser, what are my other options? How do other mobile websites achieve this result?
Additional Info:
I did some more experiments with the resizing image, changing view port, and changing the position:fixed/absolute and came to some interesting results. See below:
position:fixed no-background-size with-viewport - fuzzy
position:fixed no-background-size without-viewport - crisp
position:fixed background-size:20% with-viewport - fuzzy
position:fixed background-size:20% without-viewport - fuzzy
position:absolute no-background-size with-viewport - fuzzy
position:absolute no-background-size without-viewport - crisp
position:absolute background-size:20% with-viewport - crisp
position:absolute background-size:20% without-viewport - crisp
Here's how to read this chart:
first column states whether #top-nav-container is using position:fixed or position:absolute
second column states if i used background-size:20% or if i omitted it
third column states whether i included the <meta viewport> tag in the head
fourth column states whether the optix testing logo is fuzzy or crisp.
Looking at the results, you can see that the only time you get a crisp image with a container that has position:fixed is when an image has not been stretched or compressed via background-size or or with the view port. Also, the only time you get a fuzzy image with a container that has position:absolute is when an image has been stretched with background-size and with a viewport.
Using position: fixed is still a bad idea on mobile devices. The overwhelming majority of websites fall back to a static header for mobile views (ie. no floating navbar).
I experienced similar issues recently, as illustrated in this question.
A few resources for you:
Read this article on Quirksmode to learn about the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
See which mobile browsers support position: fixed in this table: http://caniuse.com/#search=fixed
add inside top-nav-container.
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
I got this problem too when creating fixed action bar with div using background-image as icon. But when I add Text in that action bar, that background-image become crisp. So I just add as replacement for Text if I don't want any Text on my action bar.
Sorry for my bad English :D
Instead of user-scalable=no change it to user-scalable=0
try this:
img {
transform: scale(1) rotate(0) translate3d(0,0,0);
}
<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->
add a "fixed" element follow the "fixed", just like up.
I have a strange issue with Android browser. the div, p tags aren't considered as blocks in my phone's Android browser. I've used the Eric Myer's reset in the beginning of the style sheet. And here is my HTML code -
<body>
<div id="mainwrap">
<p>Some paragraph</p>
</div>
</body>
In that Android browser, p tag is just 50% of the mainwrap. I tried putting p width = 100%, but didn't work. I tried replacing p with a div, still it shows only 50%. Any idea whats the problem? Thanks.
The code below is not working in Android browser!
How do I fix it?
<input id="sannn" type="button" value="SAN" />
<div id="sann" style="width:640px; height:200px; overflow:scroll; border:solid 1px red;">
<div style="border:solid 1px green; width:3000px; height:200px;">4545</div>
</div>
$('#sannn').bind('click', function () {
$('#sann').scrollLeft(10);
});
Looks like it is a bug in Android Browsers 4.0.3+
http://code.google.com/p/android/issues/detail?id=38505&thanks=38505&ts=1350315570
Issue 38505: DOM element scrollLeft setter doesn't work in Android Browser 4.0.3+
Position the div wrapper as relative with overflow hidden and a specific width and height. Use position absolute on the inner div (the div you want to move) and play with the inline style left position via jQuery.
If you really need scrollbars. The Jquery UI sliders might help: http://jqueryui.com/slider/
I ran into the same issue with Zepto.js. I was able to work around this issue by first disabling the overflow: scroll on the scrolling element, like so:
$("#element-to-scroll").css({'overflow': 'hidden'}).scrollLeftTo(newXPos, 250).css({'overflow': 'scroll');