I am trying to transition an element from top to bottom, (0 to 100vh). Internet explorer 11 is doing weird things, when transitioning transform property. It is going up when it should go down and not respecting the duration.
JSFIDDLE1
JSFIDDLE2
div{
width:200px;
height:200px;
background:black;
transition:transform 5s;
-ms-transition: -ms-transform 5s;
}
div:hover{
transform:translateY(100vh);
-ms-transform:translateY(100vh);
}
Why is this happening and how can I solve it?
I know this question is old, but I ran into this same issue today. I'm building a kind of slideshow that uses CSS transitions to animate slides in and out. Most browsers handle transform: translateX(-100vw) and transform: translateY(-100vh) to move slides left and up respectively, but IE has trouble calculating the correct start/end positions and gets confused on the timing just like #Alvaro mentioned.
The solution is to use absolute units (e.g., pixels) rather than relative. But, given the wide range of screen sizes I need to support, I can't use a single value.
My work around was to use a series of #media queries to define a set of translation rules that will always ensure the slide moves off screen, but doesn't go too far. For example:
/* Slide left */
#media (max-width: 480px) {
.slide.left {
transform: translateX(-480px);
}
}
#media (min-width: 481px) and (max-width: 960px) {
.slide.left {
transform: translateX(-960px);
}
}
#media (min-width: 961px) and (max-width: 1920px) {
.slide.left {
transform: translateX(-1920px);
}
}
#media (min-width: 1921px) and (max-width: 3840px) {
.slide.left {
transform: translateX(-3840px);
}
}
#media (min-width: 3841px) {
.slide.left {
transform: translateX(-7680px);
}
}
/* Slide up */
#media (max-height: 480px) {
.slide.up {
transforom: translateX(-480px);
}
}
/* Etc. */
These queries would support up to 8K resolution, albeit with significantly less granularity at higher resolutions. You'll want to adjust them based on your expected usage.
Related
I encountered a problem of images in a website I am developing getting scaled up the window's scale and layout is set to 125%.
#media (-webkit-min-device-pixel-ratio: 1.00), (min-resolution: 100dpi) {
body {
background-color: midnightblue;
}
}
#media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
body {
background-color: darkslategrey;
}
}
This code works to detect it, ie. is set to 100% the BG is midnightblue, if to 125% then darkslategrey. I could just try down-scaling ALL images if this 1.25 ratio is detected, but probably that's not an effective thing to do. So is there a way just to turn the upscaling off?
Thanks )
seems I found a kinda working solution:
#media screen and (min-resolution: 120dpi) {
body { transform: scale(0.8) }
}
They always say that min-width #media rule is the way to build for mobile first, I have read plenty articles about it but i still can't understand how exactly min-width rule works> But the max-width is easy and lends itself to easy comprehension.
#media only screen and (min-width: 400px) {....some rule here.....}
#media only screen and(min-width: 900px){......some rule here....}
my question and confusion is: can one used both breakpoint on the same stylesheets? and how does it make for mobile first ?
I need a tolerable responses please, no down voting for those who enjoy down voting please be tolerable and nice enough to help put.
Indeed its true using min-width helps to make a web mobile first.
Let us take an example.
We are creating a web that will scale to two viewports say 300px, 300px+ devices.
1) using min-width
body {
background: yellow;
}
// 300px+ devices
#media (min-width: 300px) {
body {
background: red;
}
}
Here background-color is been overridden for 300px+ devices
2) using max-width
body {
background: red;
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Here background-color is been overridden for 300px- devices
Now down the line in your App timeline you need to support 600px+ devices
3) using min-width
body {
background: yellow;
}
// 300px - 600px devices
#media (min-width: 300px) {
body {
background: red;
}
}
// 600px+ devices
#media (min-width: 600px) {
body {
background: green;
}
}
New media query added to support 600+ devices, no changes needed in the existing style sheet.
4) using max-width
body {
background: green;
}
// 600px- devices
#media (max-width: 600px) {
body {
background: red;
}
}
// 300px- devices
#media (max-width: 300px) {
body {
background: yellow;
}
}
Although we needed additional media-query rule to support 600+ devices, but we needed to change the global body background-color to support new breakpoint.
Now compare 1) with 3) and 2) with 4) ,
you will notice to support new breakpoint
for 1 to 3 we didn't need to change existing style rules, just added new rules over it.
but for 2 to 4 existing rules were modified to support new breakpoint
Summary
so min-width ensures future friendly and progressive enhancement (mobile-first)
but max-width leds to short-sighted approach and needs degradation (mobile-last)
I am creating an animated logo for website running on WordPress and I want to know if it is possible to make the css animation possible only for desktop resolutions. I think the animation would not work for mobile version and I want to have different css for mobile versions.
Is it possible to put the #keyframes into #media screen and (min-width: 1000px){...} ? Just combine it somehow?
Thank you.
Just use the animation property inside a media query.
#keyframes myKeyframe {
from { top: 0; }
to { top: 100px; }
}
#media screen and (min-width: 1000px) {
#myDiv {
animation: myKeyframe 1s;
}
}
I'm using CSS to selectively display content depending on viewport size. E.g.:
CSS:
.hires, .midres, .lowres {
display: none;
}
#media only screen and (min-width: 801px) { /* hires, desktop */
.hires {
display: inline;
}
}
#media only screen
and (min-width: 600px)
and (max-width: 800px) { /* mid res, tablet */
.midres {
display: inline;
}
}
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
.lowres {
display: inline;
}
}
HTML:
<p class="hires">Resolution: high.</p>
<p class="midres">Resolution: medium.</p>
<p class="lowres">Resolution: low.</p>
<p>This paragraph will always be displayed regardless of resolution.</p>
Which works, but only up to a point. When it comes to images, it turns out that I've neatly painted myself into a corner here. Because somewhere down the line there's something like:
CSS:
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img {
float: none;
display: block;
width: 100%;
height: auto;
}
}
Which means that in the following case:
<img src="foo.jpg" class="hires" />
the image is always displayed regardless of viewport size, because the 'display: block;' overrides (conflicts with, really) the preceding rules to selectively display the image or not.
Unfortunately 'display' has no opposite of 'none'. I can't use 'visibility' because that will still leave a gap where the hidden content used to be. I could use jQuery to show() and hide() content, but I'd rather not move part of my styling from the style sheets (where it belongs) to Javascript (where, strictly speaking, it doesn't).
Unfortunately I noticed this little snafu only now, quite a way into the project. Which means I'm an idiot. :-)
What would be the best way to deal with the above issue?
You could either wrap images in something with the class lores or use img.lowres as selector in your css, ie
#media only screen
and (min-width: 320px)
and (max-width: 599px) { /* Low res / smartphone */
img.lowres {
float: none;
display: block;
width: 100%;
height: auto;
}
}
I'm trying to make a responsive index for my website, for this, i'm using Firefox Responsive Design Mode. In 1920x900px, my #media is working perfectly. The problem is when i change to 1280x600px. He keeps getting the images positioning like i order in 1920x900px. I made some tests and other attributes for 1280x600px works ! Here's the comments in my code:
/* Para monitores 1280x600px */
#media screen and (max-height:600px){
#slider{
/* If i change this to display:none; it really disappear the tag,
which makes me guess the screen calc is doing ok.*/
height:73.5vh;
}
}
#media screen and (max-width:1280px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:0;
}
}
/* Para monitores 1920x900px */
#media screen and (max-height: 900px){
#slider{
/* But, if in 1280x600 i got display:none, and here i got display:block, he shows me the image. It's like it doesn't work just when i give same attributes to differente #media. */
height:51.6vh;
}
}
#media screen and (max-width: 1920px){
#mainAtc{
margin-left:2vw;
}
#othAtc{
margin-left:7.6vw;
}
#atcRest{
margin-left:2vw;
}
}
Someone could help me ? Thanks!