We Keep Coding

Moving element with javascript - choppy effect in Safari and Firefox

Basically I'm trying to move an element based on the scroll position. The issue I have is that when scrolling on Firefox and Safari (MacOS) the element acts weird and choppy as the positioning doesn't update on time or something. Sometimes you need to scroll up and down few times to see it. Firefox has additional smoothing which makes things even uglier.
Element needs to be relatively positioned (needs to respect overflow: hidden).
The sample code is below:
HTML:
<div class="container">
<div id="block"></div>
</div>
CSS:
.container{
height: 800vh;
width: 100%;
}
#block{
width: 300px;
height:50px;
background: #000;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JS:
var block = document.getElementById('block');
window.addEventListener('scroll', function(){
block.style.top = window.pageYOffset*1.2 + "px";
});
And a CodePen link: https://codepen.io/maciejgunia/pen/gxQReo
Thanks for any suggestions.
EDIT: here is the observed behaviour - I know some people see it differently - https://jumpshare.com/v/RhU7gNYAlMFwDo7HIl5Z

add transition: top 1s; to #block CSS this will smooth out your animation

Fullscreen <canvas> element on iOS: glitch on scroll

I have a <canvas> element with this CSS:
canvas[resize] {
width: 100%;
height: 100%;
position: fixed;
left: 0; top: 0;
pointer-events: none;
background: black;
}
I display funny stuff behind the actual content on a website. On iOs, the address bar hides on scroll. When it hides, the canvas doesn't fill the entire height anymore for a second or so, which is ugly.
Here is a video. Note that I colored the canvas all black to make the point more clear. Normally the canvas is not just black. Note how the content underneath can be seen at the bottom when the address bar hides.
Of course I tried to make the canvas higher than 100% but this has no effect. Even when I set the height to 1000px (and confirm on the console that $('canvas').height() returns 1000) the same thing happens. It is as if the canvas element isnt rendered outside of the viewport.
I read up on how to force hide/show the address bar so the transition does not happen but it seems that all methods are outdated. Of course I prefer not to influence the address bar's behaviour.
Here is a demo showing the problem. The canvas is not black in this demo, it is the wobbly colored thing in the background.
Any suggestions?

I solved it by
making the canvas higher than the viewport
adding the wonderfully hacky -webkit-transform: translate3d(0, 0, 0);
It now looks like this:
canvas[resize] {
-webkit-transform: translate3d(0, 0, 0);
width: 100%;
height: 115%; // Higher than the viewport
position: fixed;
left: 0; top: 0;
pointer-events: none;
background: black;
}

Center an Image Vertically in a Fixed Position Div

There are tons of questions on SO regarding vertical alignment, but I haven't discovered a clear answer to my problem.
I created a fiddle to show exactly what I'm trying to do.
HTML:
<div id="fade"></div>
<div id="fullscreen">
<img src="http://jira.seraphdevelopment.com/jmajewski/clean/uploads/pictures/n8jvxzd2476480d0.jpg" />
</div>
CSS:
#fade {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Transparent Background */
background-color: #000;
opacity: 0.50;
}
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
/* Adding the display: block allowed me to center
the image horizontally with the margin: auto. */
display: block;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
/* This didn't work for me. */
vertical-align: middle;
/* This didn't do anything, either. */
line-height: 100%;
}
I am trying to make a lightbox of sorts, such that the user will click on an image on the page, causing that same image to load up in fullscreen mode. The first div, fade, will be used to cover the entire page with a semi-transparent black background, essentially giving the effect of the page fading away, while also making things modal.
I wanted to be able to nest the image inside the fade div, but I ran into a problem. Setting the opacity on the outer div (to create the fade effect) caused my nested image to inherit the opacity value. Thus, I added a separate div that was identical to the first one, except without the background, and nested the image inside of that.
For the record, I did manage to figure out a workaround to the opacity issue, but I haven't yet implemented it. Credit to Blowski, a SO user who posted this answer to a question regarding opacity:
I do not want to inherit the child opacity from the parent in CSS
The long story short, I have tried quite a few things now in trying to get this image to be centered vertically, but to no avail.
Keep in mind, this solution needs to work with any image!
I am certainly capable of adding a line of code to the $(window).resize() function to center the image manually, but I would like to avoid doing so, if possible. I'm very curious to learn a way around this, as I seem to run into these types of issues more often that I'd like.
Bonus: Why is vertical alignment so difficult for a browser to perform?

Here is one way centering an image in a fixed/absolute positioned div using CSS.
#fullscreen {
/* Cover the entire viewport. */
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#fullscreen img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* Limit the size of the image. */
max-width: 80%;
max-height: 80%;
}
The trick is to use position: absolute for the img and set all the offsets to 0, and then margin: auto will center the image.
The max-width and max-height values will work as expected.
The reason this works is that the image has intrinsic dimensions, so the CSS engine has specific values to do the necessary math to center the images both vertically and horizontally.
See demo at: http://jsfiddle.net/audetwebdesign/KG99S/
Comments
Note that this technique works independently of the overlay.
Also, this works regardless of the aspect ratio of the image.
Reference
This technique follows from the CSS2 specification regarding how the horizontal and vertical margins are determined for absolutely positioned inline, replaced elements.
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
and
http://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height

specific image resize with jquery

I've been trying for sometime to replicate an effect seen on this website:
http://www.gregparmasmith.com/
If you play around with the width and height of the window, the images keep proportionate w/h based on their aspect ratio. The images are always loaded with a consistent height, making this slideshow look very nice.
Also notice how wider images (vs thinner images) are resized when just the width of the browser window (not width and height together) is reduced - The images bounce down from the top margin.
He seems to be programming this differently than most responsive jquery image plugins I've seen. There is a parent div container, but it has a static size and seems to not govern the position/sizing of its child images.
Looking at the source, the images top,left,width,height css properties are dynamically being altered.
Any suggestions for how to do this??

The effect seen on that page can be accomplished with just html and css. No javascript needed. He's using percentages as the values for his margins so that as the browser size gets smaller, so does the calculated pixel size of the left and right margins of the div that contains the images. Then by setting the img width to a max-width of a fixed pixel size, say 400px, it will ensure it will only reach a certain width as it does on very large screens.
Then by setting the "width" to a percentage like maybe 100% the image will automatically resize to the size of the containing div because that div is responding the size of the browser.
something like this:
#inside {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img {
width: 100%
}
http://jsfiddle.net/wRNJ7/1/

I have found a pretty close solution here in this thread:
Vertically center image on page and maintain aspect ratio on resize
Here's a good working demo:
Demo
html, body {height: 100%}
body {
position: relative;
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
.wrap {
height: 100%;
overflow: hidden;
position: relative;
}
img {
max-width: 70%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
This effect is achieved without any javascript, which at first I thought was undoable. In this demo, the action of the resizing is a little different. In the original website I was trying to model (http://www.gregparmasmith.com/12), it is "clear" that resizing happens only when necessary, so that for a thin image (ex. 500x100): When the browser window is made as thin, no shrinking would occur. Resizing of the image would occur only if the width of the image would exceed the width of the browser.
In this jsfiddle, I think I can notice this same action is happening, but it's not as obvious.

Overflow-x on same browser, different platform

I have a jQuery slider which needs to be centered in my body; this slider acts as a changing background (fades into one another). I have no overflow problem on my computer (iMac), but on my nexus 7, my body is much wider to fit the whole image. In both cases, I have the latest version of Firefox.
Here's my CSS:
#grosse_photo {
position: absolute;
top: 0;
left: 50%;
margin-left: -552px;
height: 597px;
width: 100%;
max-width: 100%;
z-index: -1;
}
My images are all 1904px wide x 597px high.
I've tried making #grosse_photo relative and absolute position my images from there, but they don't center. I've also tried overflow-x: hidden to all elements (#grosse_photo, body and html) but don't seem to get anywhere.
If it helps any, this is the jQuery animation I'm using:
http://jonraasch.com/blog/a-simple-jquery-slideshow
It has served me well in the past, but this is the first time I'm using it as a background.