I'm using the latest Firefox testing a fluid layout.
Somehow after the last update of FireFox, I seem to no longer be able to shrink the page width below a certain threshold level (in my case 348px). Even if I delete all elements on the page, I'm still at 348px.
I have tried to hide all toolbars and Firefox buttons, but still no change.
If check a page in Chrome, the HTML width gets reported correctly = whatever my browser window is resized to.
*Question:
Is this a new "feature"/setting? If so, can I turn this off... It's annoying for sure.
Firefox 14 (if I remember correctly) should have a responsive layout tool - you might want to check that out.
Related
I'm spending some time writing HTML and CSS, and am using the developer tools in Firefox 53. Specifically, the "HTML/DOM/CSS Inspector".
When you move the mouse over a chunk of HTML in the Inspector window, the corresponding rendered HTML element on the page is highlighted. Plus, there are some helpful grid lines and color overlays and whatnot also drawn over the page, all of which was a good decision on the part of the Mozilla developers. It shows how random divs and other elements might be overlapping, is great for showing where margins are collapsing, etc.
However, when I move the mouse off the HTML tree, all that useful highlighting and overlays vanish. Is there a way to get that highlighting/overlay to "stick"? For example, until I click on another HTML element, or reload the page, or... actively take some action other than simply moving my mouse?
Note that right-clicking the Inspector and selecting the ":hover" menu entry is most emphatically not what I'm looking for. I want to change the mouseover behavior of the Inspector, not that of the page.
(Now I'm going to pour another shot of whiskey and resume fighting with the Rules/Computed-versus-"browser styles" controls. Those were... not as well designed.)
The general highlighter can't be toggled to stay on the page, it only reacts on hovering the nodes.
Only some other highlighters are sticky, like the one for elements matching a specific CSS selector or the CSS grid highlighter, both located within the Rules side panel:
The CSS selector matching highlighter is currently (as of Firefox 53) the one that comes nearest to what you're looking for, though it's missing the grid lines.
Furthermore, there is already a request for adding a sticky element highlighter in Mozilla's bug tracker.
Ok so this bug is very weird
here is my code, you can actually see this bug happening using fiddler
http://jsfiddle.net/LLMUX/13/
the code works fine as long as you don't go to a different tab. the code is a rotator. if you hover the links it will show the block the hover is assigned, then once you hover off it will resume the main rotation
produce the bug
- have the fiddler page open, you could copy the code into a file and try it, same thing happens
- with the fiddler page you can hover or whatever you want or do nothing
- open another tab, do whatever for a few seconds 5-10 should do
- go back to the fiddler page
- chances are you will see 2 blocks showing then eventually 1 goes away
this only happens if you are coming back from a different tab, if you stay on the page this will NEVER happen. I tried is safari, it did not happen I tried it on IE9 it did not happen! I tried this on FF 7 and 8, both with this problem.
If anyone have any idea on why this happens it would be greatly appreciated
Edit - might not happen 100% of the time
I bet your problem is the same as this: Jquery setInterval too fast when coming from another tab
Browsers try to minimize the performance hit of web pages being active when the user doesn't interact with them. One such optimization is setTimeout/setInterval "clamping": Firefox 5+ doesn't fire timeouts faster than once in 1s.
I see that your code only uses a 1300ms interval, but I guess jQuery's animation deals with being in background in a different way than your setInterval-based code does, but I'm not up to debugging this to know the exact reason it works like that.
See also Background Tab Animation and jQuery
(edit) and if I'm right, the way I'd try fixing it is to stop using setInterval to drive animation and instead to always use the jQuery's 'finished' callbacks to schedule the next slide via setTimeout: fadeIn --> wait 1s --> fade out --> fade in.
With the recent Firefox and Chrome browser releases, the default status bar has been taken from us to free up more screen space and de-clutter the UI. The status bar was used to display the URL of any link the user rolls over, among other things.
The browser makers couldn't completely remove the status part of the status bar, because users need to be shown where they will be going if they roll over a link. They've settled into displaying a temporary, tooltip-style modeless text bar that appears at the bottom left or right of the browser window's client area on link rollover.
I'll put aside my displeasure with the browser makers invading MY beautiful client area and smearing their chrome all over with distracting fade-in transitions and weak color/contrast choices. I'd just like some suggestions on how to best deal with this current situation.
I use absolute positioning to keep some of my DOM elements in the lower left and right of the visible client area on the page. Is there a way to detect in javascript how tall these temporary status bars will be so that I can vertically offset my elements far enough from the bottom of the page so that they are not occluded by the temporary status bar?
Browser plugins like StatusBar-4-Evar are not a good solution for me because I could never suggest that my users install anything to view my website. I'd like solutions to work with the browsers' default settings.
I don't want to work too hard for this; I'd like to avoid browser/version detection to know when I should vertically offset my elements. I am ready to accept if my page design is not workable and to assume the bottom of the page is now off-limits to any content other than that page content which flows there naturally.
My jScrollPane (division) works well in IE and Chrome. It may be of some significance that I am also running JQuery MouseScroll and hoverintent. Again, these functions work fine in IE and Chrome.
The division is displayed properly in Firefox, as is the vertical scrollbar. There's about 50 lines to scroll down through.
In Firefox, the dragger fills the entire length of the vertical bar and doesn't move. The dragger and the arrows do respond to mouseover, but the functions don't work.
Perhaps the scrolling action is functional, just that there is no space to scroll, because the dragger fills the entire region. I am unsure whether my jScrollPane works or doesn't in Opera or Safari.
I checked Google and found little directly associated advice, just to:
"Ensure that the division has a height specified (it does) and to try refreshing (no luck) in case the content (only text) needs to pre-load."
I wonder whether anyone can suggest any checks for me to make from their previous experience before I post any code to wade through.
This is only the second question tagged with jScrollPane & Firefox, so perhaps no-one will be familiar with this 'bug'. In which case I will create and post some reduced code which generates this bug in Firefox but not IE or Chrome.
Update: I created a 'test' scrollbar webpage to see if the bug would be replicated, and that works fine - so no need to post that for error-checking.
The problem must lie somewhere within my code on the site I'm working on.
So far I have identified that all the JavaScripts work and my custom jScrollPane CSS is fine. So it's just a process of elimination through each of the stylesheets now. I have a feeling the source of the bug may be in my custom reset CSS.
I'm confident I'll fix the bug, and will let you folks know either way.
The bug was in the CSS reset as suspected. Specifically, with the rule for column-count.
I had defined them (moz-/wekbit-/column-count) as '1' instead of the defining as 'auto' / not defining it at all.
This was from when I was experimenting with (CSS3) multi-column text. Presumably jScrollPane requires multiple columns. Not enough support yet for multi-column text to be worth implementing yet IMO.
to perfectly describe the problem look at (in firefox, my version=3.0.10!!):
http://musca-design.de/portfolio.php
when you click through the portfolio, apparently the scrollbar jumps to the bottom?
In Safari, Opera it wont, it stays at the top, which is what I want.
Is there a workaround or how can a tackle the problem?
The scrollbar (the page actually) jumps, because Firefox jumps to an anchor.Your links in your <li>-list e.g. point to URL#p05 - is there a reason for using those anchors?
There's no real way to prevent this but a solution has been posted here
Prevent default hash behavior on page load