Here's the issue, the pointed out black bar only in android:
When I say randomly, I mean that this black bar will appear almost exactly 50% of the time. The other half it shows the app as expected. I did 20 tests doing the exact same method of closing and opening the app, and 10 times this black bar appeared and 10 times it didn't. When it didn't show the bar, it flashed white, then went into the full screen.
I tried all the solutions here, here, here and here.
One of them says it's a jquery mobile issue, which it's not because I removed jquery mobile and it still happened. One of them said "just install this plugin and setup the settings" which didn't work. One of them says drop the view-port meta tag which didn't work. I also tried using jquery to alter the body height to be 100vh on page load and device ready which also didn't work.
It's also important to note that minimizing the app and going back into it removes the black bar. I've also tried remote inspect in chrome, but every time I open it up to find out what's there, it fixes itself. It also just randomly fixes after navigating around the app for a bit.
I'm at my wits end on this.
Related
I am working on implementing a couple of instances of http://amsul.ca/pickadate.js/ but i seem to be running into a couple of problems with the css. If you view the above site on an ipad or iphone, the calendar is positioned correctly, as the container covers up the window as a good fixed position element should do. But if you were to see my site, and pull up the calendar, then you would see the calendar container (the greyed out background) starting from the bottom left corner of the input that it is next to (as if it were positioned relative) and extending with the same dimensions of the window. In addition to this, when I inspect in mobile safari's web inspector on my mac, the blue box, which usually indicates where the div is being positioned is fixed to the top of the document and not necessarily the window.
The only error I'm getting are a 404 from a stylesheet that has nothing to do with this plugin.
here are 3 screenshots of the problem that i am facing, the first has shows the input that the div with the calendar is just after
http://www.dumpt.com/img/viewer.php?file=rvipsnuyfyuv8u6xt5dr.png
the second is where inspector seems to think it is rendering and you can see the translucent background further down the page
http://www.dumpt.com/img/viewer.php?file=nc7el13lcthqlzrsfarg.png
and the third shows that it seems to be the correct dimensions and everything, but the calendar does not seem to be positioning itself correctly
http://www.dumpt.com/img/viewer.php?file=8hbswbfv9abwobkth8iq.png
If anyone has any ideas about why this might be I would love to hear them because right now, i'm at a loss.
EDIT
This page has been tested on android devices and works perfectly.
Ok, so it seems that mobile does not support fixed elements very well.
http://www.quirksmode.org/m/css.html
Search: fixed
which is really unfortunate. If anyone has any workarounds for this, that would be really great.
My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.
Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.
I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.
I have been redesigning my WP portfolio website of late and have been playing with a neat little aesthetic jQuery plugin, BlackAndWhite, Which turns all of the images in my gallery view black and white and makes them recolor on hover using the HTML5 canvas.
I noticed one bug with the plugin is that if it runs before the images have finished loading, it will sometimes only grey-scale half of an image. So I have been using another tiny plugin to only run the script after I'm certain that the images have finished loading. see waitforimages.js
The initialization script is the following:
jQuery(document).ready(function(){
jQuery('.bwWrapper').waitForImages(function(){
jQuery(this).BlackAndWhite({
hoverEffect : true // default true
});
});
});
where bwWrapper is the wrapper around each img.
Now this works really nicely on most computers and browsers that I have tested thus far. Everything works the way it should. However, when I opened the site on my android, I noticed that only 50% of the images recolored. When I refresh the page, again only 50% go black and white, though it is different ones each time. Making the site fully responsive to mobile is still on my to-do list, but I have noticed this fairly blatant, yet difficult to explain bug.
Any idea what might be causing this?
You don't need to preload the images because the plug in aleady do it. Try to download the last version of the script on github https://github.com/GianlucaGuarini/jQuery.BlackAndWhite and if you still have problems send me a private mail with a link so I can check what could be the problem.
I've found some wierd behaviour related to scrolling and rendering and javascript.
How to make it happen:
On any webpage that is long enough to scroll on. Start to scroll pretty fast (fling the page). then release the touch.
Now while the page is still scrolling because of the momentum. Tap the screen to stop the scroll.
This make the browser enter a wierd mode.
On the nexus one it behaves like this:
The updating of what's shown on the screen stops, you can still click on links and the go to where they are supposed to but what's shown on the screen stays the same.
If you then scroll the screen a bit the update of the screen kicks in again and what you you where suppsed to see all the time is shown.
On all phones with HTC Sense I've tried (Hero, Desire, Legend) this happens:
The updating of the screen is stopped just like on the nexus one, but also the execution of any javascript is stopped.
If you click on a link that takes you to another page however things return to normal again.
The way I tested this was I created a page like this:
http://pastebin.ca/1881620
The changeColor function simply changed the background color of 'container' to a few different colors.
So before the error what happens is that when you click any link the color changes.
after the error this happens:
Nexus one:
when you click on the links nothing happens (except the "orange link selected rounded corner box thing" is shown as if the link is clicked). Then when you scroll abit.
You can see the color has changed (and equal amount of times to the number of times I clicked the link).
On Sense:
The links take me to google.com
Has anyone else noticed this problem? Is there anyway to work around it?
Thanks.
You could try using a plugin that manipulates the browser's scrolling process, such as iScroll4.
iScroll4 let us do some pretty cool stuff (like fixed headers/footers), but it did have some performance problems in some of the older/crappier Android phones...
I can't guarantee that it'd fix your problem, and it'd be kind of a last resort, but it might be worth trying if you're interested in iScroll's other features, or if you've hit a dead end with your bug, and it's a show-stopper for your app.