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;
}
Related
I'm trying to use this background gradient and keep it centered on all screen sizes (Next.js, React, Sass)
The JSX:
<div className="bg-gradient-container">
<Image src={Gradient} alt=""/>
</div>
The css styles:
.bg-gradient-container {
position: absolute;
top: calc((470px - 32vh)*-1);
left: calc((1920px - 100vw)/-2);
width: 1920px;
z-index: -10;
animation: appear2 3s ease-in;
}
I've been trying things for a while and can't figure it out. In the gif, when I set it to Desktop mode then it resizes fine. When it's set to mobile, it resizes keeping the entire right side of the image in frame.
The weird thing is that when I hover over the image in devtools, it says that the width is 1920x1080, and the text content is the full viewport width (even though it doesn't take up the whole viewport ??).
try to use
left: 50%;
transform: translateX(-50%);
instead of left: calc((1920px - 100vw)/-2);
Try:
.bg-gradient-container {
position: absolute;
top: 0;
left: 0;
height: auto;
width: 100%;
z-index: -10;
animation: appear2 3s ease-in;
}
If that does not work, you might need to apply height: auto and width: 100% to the image. The idea is that the Image element should fill it's container (parent element).
Also, Chrome dev tools can be a little buggy when using responsive mode, sometimes it does not resize everything correctly. When you select something like 'iPhone 12 Pro' from the Dimensions dropdown menu in dev tools, does the image resize correctly?
I am currently building a blackjack game and was using alerts to let the player know they won. I eventually swapped over to using animate.css to get a simple "you won" and "you lost" message to appear on the screen after the logic finds a winner.
I do this by having a function popup() that runs each time a win or loss parameter is met within if elses, and sets the display to "block". At first, I had this animation div between the 2 sides of the game board ( the player and dealer side, each with a flex property), but hated the fact that once the div appears on the function running, it pushes the player side down. To fix this, I thought I could simply put a z-index to the animation so that it would just appear to overlap.
At first this wasnt working, but then I moved the div that holds my animation outside of the main container (which is a flex container), which now works and stops any content from being pushed down... but I am having issues with the positioning.
I am trying to position the div in the center of the screen to act as a modal or pop-up, and I want to add a interval the div to allow me to close the whole container when a timer runs out ( and thus remove the animation from the screen and allowing the player to choose the "new game" button ).
After trying various things, I can either...
get it to be centered ( H and V ), but pushing content ( meaning z index isnt working, which is where I started )
get it to have z-index and appear above everything else, and even get it to be centered in the screen, but unable to get its sizing to work properly and there is this weird UI glitch where the scrollbar will appear and then disappear ( as if the screen size is getting bigger when the animation appears, which is weird because the animation has a z-index of 2, so why would it make the screen bigger? ).
Sorry if this is a little hard to follow, but the TLDR is that I am unable to get my animation div to appear horizontally and vertically centered without some issue.
Here is some of my code:
<h1 class="animated jackInTheBox" id="youWin"></h1>
.jackInTheBox {
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: 1;
margin: auto;
font-size: 32px;
position: relative;
z-index: 2;
margin: auto;
max-width: 100%;
text-align: center;
display: none;
background-color: teal;
}
This animation div sits inside of the main container div, at the very top
.mainContainer {
display: flex;
flex-direction: column;
width: auto;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: auto;
}
Part of me thinks that this would be better to do with a modal, but I would still like to see where I am going wrong. Thank you all in advance.
Try changing your jack in the box class to position fixed with
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
Like you mentioned, this is a little hard to follow without being able to see more code of what you have. Do you think you could add this as a jsfiddle/codepen that contains all of your code? I get a feeling there may be something more to the issue than what you have placed.
This link may also help https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
If parent container has position: relative and child has position: absolute then you can set children with following properties to move it in the middle of parent's horizontal and vertical axis:
.jackInTheBox {
animation-duration: 4s;
animation-delay: 0s;
animation-iteration-count: 1;
font-size: 32px;
z-index: 2;
text-align: center;
display: none;
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Last four lines let you make it:
position: absolute; sets child in relation to parent's up, left corner (if parent has position: relative)
top: 50%; moves child to the center of screen (child's top border will be in the middle of screen horizontal axis)
left: 50%; moves child to the center of screen (child's left border will be in the middle of screen vertical axis)
transform: translate(-50%, -50%); makes child move 50% of its width into left and 50% of its height into top making it centered perfectly as you need
After doing this you don't need to set width neither max-width, as <h1> markup is a block element and it takes 100% of parent width automatically.
Additional, you don't have to make your parent element has display: relative to get the same effect. Child will use then screen original properties to set position.
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
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
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.