Develop Reference

Preventing jumps with responsive images?

I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.

You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};

Viewport issue on mobile devices

I have an issue I'm struggling to overcome. I deployed my site, and noticed that the viewport logic is broken for STOCK browser on Android device. Chrome browser on the same Android device works. Also, iphone6 works, but iphone5 doesnt. I'm dynamically determing the viewport values depending on width of screen.
Here is a test version of the site:
http://spaniard.ca/workVersions/beta/index.html
I can't change the design and layout, and the site needs to be centered in the middle as it is now.
Does anyone know why on on android stock browser it would NOT work, but on chrome on same device would?
anything will help, thanks!

You would have an easier time doing the responsive layout if the hero image was an actual img tag instead of a background image. You can get the background image to not become cropped by adding the CSS:
background-size:contain;
On a side note, you need to make sure that the containing elements inside article#what-is-spaniard have percentage widths.
EDIT:
From what I have seen, this isn't an issue of browsers, just lacking the proper code

Providing solution without seeing the code is quite tough.
Still giving you a suggestion of resolving it.
Just an idea. Try changing the background size in CSS as below :-
background-size: cover;

Firefox for Android - address bar overlaps content. Is there a solution?

I am working on a web page, that has to be 100% high. I did it so, it works fine everywhere, except on Android Firefox.
The problem is:
When I open the page for first time, in landscape mode - the address bar overlaps the content.
If I do orientation change - it gets OK in portrait mode, and when I go back to landscape mode - it's OK there too. The problem appears only in landscape mode, before any (eventual) orientation change.
Tried many things, mostly some scrollTo() solutions, but nothing worked.
Thanks in advance.

I believe this is just how the Firefox app works. You could state in your (CSS) style sheet a 10 to 15 pixel "margin-top" for the body. This would create a black space at the top of the page. You could just adjust that height accordingly.
You could also try to check for that browser with a javascript and specify a new CSS with the "margin-top" adjustment if you didn't want it to adjust except on the Firefox app.

how to resize image as we resize browser window

can anybody tell me how to resize image as we resize browser like it is done in https://login.microsoftonline.com/
I have tried it with css approach using media query. But I want to resize image on the fly like Microsoft have done. This is what I did http://codoc.testdrive.ch/Intranet

Check out this great resource so you can understand how it works.
You have several alternatives without using Javascript, such as setting the image to 100%.
img{
width: 100%;
}
Here is a demo you will see how the image gets larger or smaller depending on how you resize the window
You can also check this demo

Use the resize event as describe in (plain Javascript) JavaScript window resize event or (jQuery) How can I detect window size with jQuery?. Then set the image size you want.

The effect where the picture decreases in size can be done very simply in CSS without using any JavaScript:
#image_id{
width: 100%
}
What Microsoft has done is implement a "responsive design." This means that the design is both "fluid" and "adaptive."
"Fluid" refers to the fact that the image changes in size as the screen becomes smaller.
"Adaptive" refers to the fact that the image disappears when the screen becomes too small. (The layout of the page changes.)
The Fluid part can be achieved using the code I have above. However, the Adaptive part will require media queries, like you did. Combine the two, and you get the effect Microsoft has.
Here's some more quick information on Responsive designs for you:
Youtube video: http://www.youtube.com/watch?v=T6MCkGWSXa0 (1:29 long)
Live examples: http://liquidapsive.com/
More live examples: http://bradfrost.github.com/this-is-responsive/

Firefox textarea typing causing screen shaking (firefox2 winXP)

EDIT: Firefox 2 windows XP
Steps to reproduce problem:
Firefox 2 and visit: http://resopollution.com/rentfox/html/property_setup.html
Begin Typing and pressing [enter key] to create new lines
After about 10 [enter key] presses you'll notice the screen shaking
How this happened
This began happening after I installed a plugin for jQuery. It's located here:
http://resopollution.com/rentfox/html//js/textarea.js
It makes it so the textarea is expandable as I type, depending on how many lines there are in the text area, up to a max-height value which can be specified in CSS.
I tried disabling the 'setHeight' function within this plugin (the only thing that changes height dynamically) but I still saw the screen shaking.
When I think the problem might be
Firefox thinks that the screen just got larger, and compensates by putting in a scrollbar on the right side of the body document.
However, it realizes that in fact the page didn't get larger, and removes the scrollbar, causing the shaking.
I have no idea where in the code that makes Firefox think this way...
Appreciate any help.

You can either force a scrollbar: http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
or hide the overflow of the div and try to get rid of the scrollbar, try overflow: hidden instead of auto in the div propertySetup

Can't reproduce, works fine here in Mac OSX + Firefox 3.5.

I can reproduce it (Debian Lenny, IceWeasel 3.0.6), but only with a very, very specific window size for FireFox (just slightly taller than 1024px, depending on your system font size, window manager and number of toolbars shown).
Just make your page slightly shorter or taller and the problem goes away. The problem only occurs when the addition of a new line after the 10th or so causes firefox to grown the page just enough to cause the scrollbar to appear. Just as you guessed.
That's a tiny 10px margin that is dependent on a lot of browser and system specific settings. In your page that margin is somewhere around the 1024px limit, depending on system font, toolbars, window decorations and the phase of the moon. Move that margin out of the 1024px region. Either make the page 40-50px shorter so that the scrollbar does not appear (even with large system fonts and an extra toolbar) or make it taller so the scrollbar is always there. Zoltan Lengyel's answer in this thread to always force the scrollbar can also be used.

I can reproduce it in Firefox 3.0.11 in Win XP.
Adding overflow:hidden to the body tag seemed to fix the problem, but doing that may wind up causing you more grief then disabling the plugin altogether. Giving the body tag overflow-x:scroll will stick a scrollbar there permanently but seems to solve it, too.

I reproduced it on Windows, FF3.
Interestingly it seems to happen within the jQuery .height() function!
Unfortunately you're using the minified version, so that's as far as I can get.