We Keep Coding

Images with "display: none" blinking in Firefox before displaying

I have a sequence of images that I want to display one at a time. All the other images are hidden with display: none. The problem is, although I'm waiting all images finish the request, when I change the image to be displayed, the image is blinking. Here is an example:
The issue happens only in Firefox. I also created a JSFiddle with the example above: https://jsfiddle.net/ofte9g5v/7/
I was able to achieve the expected behavior using opacity property but I still would like to know why the first approach doesn't work as it is the most straightforward solution and also works in all other browsers.
Edit: I forgot to mention the images blink only the first time they are loaded.

You're using JavaScript to switch the visibility in two separate calls; first you alter the CSS styles for the visible image, setting its display property to none. It looks like Firefox picks this up and paints faster than other browsers, resulting in no images showing. Next you set the display to block on one of the other images, prompting it to be painted as expected.
Generally when you want to switch between images like this you need to stack the images using CSS in order to prevent these sorts of unwanted effects. Transition Groups are a useful tool to handle transitioning state between hidden, transitioning in, visible, and transitioning out. In this case you can get by with a little CSS:
.imageContainer {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
z-index: 1;
}
Then when you want to show an image, simply set the z-index property on it to 2 or higher and set the z-index property on all other images to 1 afterward.

As an alternative, if you need the visible image to be position: relative; what I did was I set visibility:hidden; position: absolute; on the inactive images and visibility: visible; position: relative; on the active one.

The problem seems to be that Firefox doesn't decode images until they're within the viewport. So after you set the selected image to display: block; and the other images to display: none, there's a moment where no image is displayed while Firefox decodes the selected image.
The solution I found was to decode() the image prior to changing its display:
selectedImage.decode().then(() => {
for (var i = 0; i < unselectedImages.length; i++) {
unselectedImages[i].style.display = 'none';
}
selectedImage.style.display = 'block';
})

CSS: absolute element inside an another absolute element

I create a big div (div1 in the Fig 1.1) and set it to position: absolute. This div is the content container of the page, and inside this div are all the other elements. My reason to do absolute this div is for remove the bounce on scroll in browser:
Remove bounce on scroll in browser solution
My problem, is if I have other absolute divs inside the big one. In the Fig 1.1 can see the div2 with position:absolute, and if the div1 is scrolling, the div2 conduct is like a fixed element. Div2 is only an example, I have a lot of absolute elements like Popovers that to be relative is not an option.
How can I say to div2 (in the Fig 1.1 example) that when div1 scrolls moves along with page scrolling?
Code example
html, body {
height: 100%;
overflow: hidden;
}
.div1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
div2{
position: absolute;
}
Image Example (Fig 1.1)
Correct way
I know that exist a lot of related answers, but all of them is quite different to my question.
Related questions:
Absolute positioning inside absolute position
CSS: Absolute Element inside Absolute Element

I have other solution. To fix iPad overscroll I wrote a small script, that fixes "scroll bouncing" / "overscroll"
https://github.com/aiboy/PerfectScrollFix
First of all, you don't need to change layout drastically and use absolute div's. Second, scroll is remains to be "native".
There is two problems thou:
1) For now only horizontal overscroll fix is supported
2) Your content ( that will be scrolled ) should be wrapped in a single element (wrapper)
You can test this script on iPad: http://jsbin.com/usomob/4
Source code of Example http://jsbin.com/usomob/4/edit

Simulating a "Card Layout" when using Flexbox

I'm having a rather complex problem here. I'd like to make a Layout in CSS featuring multiple Layers which means basically having multiple <div> elements stacked ontop of each other (or at least make it look like this) and only the top one is visible.
In many other GUI Environements this is known as a Card Layout.
So the plan was:
Create all <div class='layer'> elements in one parent <div class='container'> element
Make them have display: none initially
invoke $.show() or $.hide() to show or hide them
HTML:
<div id="containerOne">
<div class="layer a"></div>
<div class="layer b">
<div class="inner b1"></div>
</div>
<div class="layer c"></div>
</div>
CSS:
#containerOne {
width: 150px;
height: 150px;
background: red;
}
#containerOne .layer {
display : none;
width: 100%;
height: 100%
}
.a {
background: green;
}
.b {
background: orange;
}
.b1 {
width: 50%;
height: 50%;
background: yellow;
}
.c {
background: blue;
}
This works at first since the elements will not have any space reserved on the page initially and will only occupy space when shown.
Now if i have a nested element inside a Layer and i want it to have a size of 50% x 50% this also works well: Even if the layer div is set to display: none initially.
Now by default my Container div is set to display: block and all the size calculation seems to work fine and here's where my problem begins:
I need the Container div to have display: flex to take advantage of the Flexbox features of modern browsers. Instead of setting a fixed width for my Layers i now configure them to have flex: 1 so they grow to the full size of the container.
This also works as expected. With one exception: The nested Element that should have a size of 50% x 50% won't have a size at all. Debugging this in JavaScript shows that this is because at the moment the Layers are created they will all have a size of 0 x 0 and will first get their size assigned when they are shown by $.show().
What i would expect is that once they are shown, the nested element will grow to its 50% x 50% size but it doesn't.
Is there anything i can do about it? (good solutions and back-hack-workaround solutions).
I also made a Fiddle to demonstrate the problem and to play around with.

The thing you're expecting to happen should happen, but it doesn't (in Chrome) due to a bug. It actually works correctly in Firefox.
Here's a simplified version of your testcase with no dynamic changes:
http://jsfiddle.net/CN7e8/4/
This behavior was actually recently changed in the flexbox spec, to the behavior you're expecting. The issue is that your 50% height on b1 is resolving against an auto-height element (the flex item, b) and Chrome is treating that auto-height as an invalid percent basis, even though the auto-height can actually be resolved to the container's height. (It'll become the container's height due to the default align-items: stretch on the flex container, which makes auto-height flex items take on the container's height).
For reference, the spec change to clarify this is mentioned under ISSUE 3, part (a), in this post:
http://lists.w3.org/Archives/Public/www-style/2014Mar/0350.html
ANYWAY. To work around the Chrome bug, you can't have an auto-height on your flex item b, given that you're depending on it being a percent-basis. You have to give it an explicit height, e.g. height:100% (which more directly resolves against the container's height). Here's your fiddle, with that changed: http://jsfiddle.net/CN7e8/5/

css margin issue with jquery slider

I've having an issue with the background images i have embedded into my carousel. click here I've noticed when i click from one slide to another the background image on my site moves out of place. The margin-top for my carousel is current set to margin-top:-275px; and the background image is set to margin-top:-64px; I am slight concerned about these settings.
Does anyone have a solution to this problem?
In order to activate the slides click the thin red tab under the nav bar

I guess that's because you have
.rslides li {
top:0;
}
It does nothing with position:relative (and the current slide has it), but it moves down the slide with position:absolute (hidden slides).
When you click a tab, there's a moment in which the new one is fading in, but it doesn't have position:relative yet. Then, in that moment, the new slide isn't where you want.
So remove that line.

The jumping is occurring because you are switching the LI items from position: absolute; to position: relative; at the end of the animation toggle. This can be avoided by removing your CSS rule:
.rslides li { left: 0; top: 0; }
Specifying width and height is fine, but as soon as you specify left and top - then switch from relative to absolute positioning, you get that jump you're seeing.
As for the positioning of each panel - it has to do with the way you are laying out your boxes. The sizes you are specifying are not large enough for the content you are providing. For instance: <div id="header"> is 37px tall, which is the appropriate size for the social media buttons, but you also have it as the container for the #nav-menu UL - which is another 102px tall.
It appears that in order to correct this and make things overlap, you are using negative margins - which is getting you all thrown off.
My suggestion would be to use a standardized layout system, such as any of the following:
http://cssgrid.net/
http://960.gs/
http://www.1kbgrid.com/
http://foundation.zurb.com/docs/grid.php
And use it to perform your layout tasks, rather than trying to self-craft overlapping layers with mixed absolute/relative positioning.
Alternatively, if you're going to go the overlapping layers route (again, not suggested), really commit to it. Position things absolutely throughout the layout.
In order to accomplish this, you might consider CSS rules like:
#header {
display: block;
position: absolute;
left: 50%; top: 0px;
height: 139px; /* Your Social media links height + nav buttons height */
width: 1018px; /* Your current width */
margin-left: -509px; /* Half the width - centers on page */
}
Again - this is MUCH more work, MUCH harder to maintain and MUCH less elegant - but will yield you at least a consistent spacing / sizing.

jQuery animate() different in Firefox and Chrome/IE

Currently I'm testing my webpage in different browsers for compatibility, however, I'm having an issue with my jQuery animate() in Chrome (using SRWare Iron) and IE.
I'm using the following code:
jQuery
$('.element').animate({top:"50px"}, 1400);
HTML
<h1 class="element">testing text slide</h1>
CSS
body {
overflow: hidden;
}
h1 {
margin: 0;
}
.element {
position: absolute;
bottom: -1000px;
left: 50px;
font: bold 72px Arial, sans-serif;
}
The issue I'm having, is that in Firefox (Aurora), element slides from the bottom of the screen (-1000px) up to the top anchor of 50px.
In Chrome and IE, what seems to be happening is that element is sliding from 0px on the top, down to the 50px from the top, so it's very short. If I remove the jQuery animate for element, it's positioned at -1000px (I think, it's off the screen so I assume that's where it is).
Does anyone have any ideas? The other elements I'm animating with it work properly in FF/IE/Chrome.

You should be consistently manipulating only one of top or bottom. Right now your CSS sets bottom and then your animation changes top. As the two are obviously not independent, you will be much more likely to get consistency if you set and manipulate only one of them. When you haven't set a value for top, then the javascript animation is probably getting an inconsistent starting value for top that the animation will start from. It's probably coming back as auto in some browsers and some numeric value in other browsers. You can bypass that whole inconsistency if you don't rely on a value that you haven't set.
Since your CSS sets bottom, I would suggest that you animate bottom also, not top.