IE has a interesting fullscreen mode. I still don't understand it very well but I have observed two cases:
The menu bar and additional attached toolbars hide (slide up) and it is a real real fullscreen experience. This is kind of nice.
The window frame (chrome) disappears but the menu bar and other bars still remain. They float and hide the page content partiallly.
I have looked at some pages and they basically don't deal with it. Stackoverflow.com is an example of this. The black top toolbar is hidden and the scrollbar is hidden partially too. I cannot know whether I am logged in or not (or how many reputation I have). This is problematic since I have various buttons near the top corner and when in fullscreen mode the user is not able to click on them.
Should I try to deal with it? If so how? (I would need to know how many pixels the toolbar takes to move my button accordingly. It varies since people are can attach as many as toolbars as they want)
Any help is highly appreciated.
I have upgraded from version 11.0.9600.17420 to 11.0.9600.18204 and it works consistently now. The page is only hidden when the mouse is near the top :)
I've implemented the following tabbed widget in the sidebar of my blog (Blogger hosted): http://mylpgb.blogspot.com/2013/04/how-to-add-5-tabbed-widget-for-blogger.html
It works just fine in Chrome and Firefox (the submit box is a bit wonky in Firefox, but whatever), but in Internet Explorer, I've got some problems. When the content under a tabber tab gets a little long, it overlaps the other gadgets on my sidebar. Actually, it looks like the rest of the gadgets/content are properly pushed down, but the image directly below the tabber just gets run over. There's nothing special about that image--it's just a simple image tag.
I tried setting the table height to 100%, but no dice. I'm kind of learning as I go, so I'd be very grateful for any troubleshooting tips. Thank you.
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 don't know how to describe the issue better. Here is a link to the site with the issue.
http://www.sc-pa.com/Home/PAsite-home.asp
expand or shrink the window horizontally and you will see the scrolling text doesn't move correctly with the rest of the window.
Ignore the menu, it was written in Dreamweaver and doesn't work well ever.
I searched for IE relative becoming fixed and found http://friendlybit.com/css/ie6-resize-bug/
I downloaded your page, saw the bug in IE8 indeed, and added position:relative; to the body element and the issue was fixed.