On iOS (15.3) when using a 100vh html/body, the displayed page has a small gap/space above the body tag on first load with real iOS devices (tested on iPhone 8).
After analysing and reducing the content, it turns out that it is independent of the html markup.
Debugged this for quite some time, and finally found a fix.
Add the following code to your css. My guess is that the repaint adjusts the layout correctly. If the translateY doesn't work for you, try another way to trigger a repaint.
/* ------------------------------
iOS FIX: gap/space above body element on first load
-------------------------------- */
#media (max-width: 450px) {
#supports (display: grid) {
body {
animation: pageReflow 0.1s;
}
}
}
#keyframes pageReflow {
from {
transform: translateY(1px);
}
to {
transform: translateY(0px);
}
}
Related
I am using a Wordpress theme (Modern Agency, a subtheme of Total). Images of portfolio items zoom, and an icon appears when you hover on them. This also applies to mobile devices, but this is making scrolling difficult: I find myself dragging my finger up and down the screen multiple times in order to scroll, because my mobile browser (iOS iPhone SE) seems to stick to the portfolio item, as opposed to scrolling.
you can find the website here:
I have tried to customize the stylesheet, but I cannot find a way to disable the zoom on images.
This is what I have tried so far:
.overlay-plus-hover, .overlay-plus-hover:hover, portfolio-entry-media-link, portfolio-entry-media-link:hover, portfolio-entry-img {
transition: none!important;
zoom: 0!important;
}
.wpex-image-hover,.wpex-image-hover:hover, .grow img:hover {
transition: none!important;
zoom: 0!important;
}
I want to disable the transition on mobile devices in order to allow smooth and normal scrolling.
Set a media query for mobile screen sizes and set the transform attribute to none on the .wpex-image-hover.grow:hover img class.
For example:
#media screen and (max-width:480px) {
.wpex-image-hover.grow:hover img {
-ms-transform: none;
-webkit-transform: none;
-o-transform: none;
-moz-transform: none;
transform: none;
}
}
When I tried to validate my website, the W3C CSS Validator says parse error. I really tried to understand what I had done wrong but I could really need some help.
This is what the validator says:
Parse Error: #keyframes line_draw{ 100%{ width: 100vh; } }
And this is the code in the file:
#media screen and (min-width: 900px) {
#keyframes line_draw{
100%{ width: 100vh;}
}
As #BoltClock said, it seems like IE just doesn't recognize #keyframes inside #media rules. But you can just create two different #keyframes and change the animation-name property inside a #media rule, as follows:
#keyframes line_draw {
100% {
width: 100vh;
}
}
#keyframes line_draw_smaller_screen {
100% {
width: 100vh;
}
}
#yourElement {
animation: line_draw 2s;
}
#media screen and (min-width: 900px) {
#yourElement {
animation-name: line_draw_smaller_screen;
}
}
Looks like the validator doesn't recognize #keyframes rules in #media rules. The spec allows this, and it clearly works on all browsers.
If the parse error bothers you enough (for example because you need to validate often and it keeps getting in the way), you can work around this by swapping animation-names instead of keyframe rules in your #media rules, which also resolves the issue of Internet Explorer not supporting #keyframes rules nested in #media rules anyway.
This problem seems to only happen on Safari (I tested on version 9.0.2).
If I scale my screen down to 565px width, or smaller, refresh the page, the <article>'s I have applied flipInX to flash on the screen and don't appear.
If I remove the margin-bottom: 40px; CSS from the <article> block, then it works.
Is this a bug in Safari?
Example
I had to add this CSS
.main {
-webkit-transform: translateZ(60px);
}
Have a look at the following CodePen: http://codepen.io/anon/pen/YwYYBN (I removed non-relevant parts of the code).
At the top of the CSS is a couple media queries for resizing the slides (these are auto generated by Less). Here's an example of one:
#media only screen and (min-width: 430px) {
.slides .slide {
width: calc( 100% / 1);
}
}
Then, a little further on, is a print media query which is supposed to override it, because I always want the size of the slides to be 50% on a print:
#media print {
.slides .slide {
width: calc( 100% / 2);
color: gold;
}
}
The problem is the width in this print query is completely ignored; when printing it always uses the width defined by the currently active screen rule! You can test this by issuing a print the CodePen with different screen sizes.
The #media rule should work as far as I can see; the rule is matched print, and it also appears later in the CSS. I know it is active, because the items do change color to gold. But the width doesn't change. I've even tried making it more specific (by pointing it to body .slides .slide and adding a min-width to the query) to no avail. Even !important does not work.
Can anyone tell me what is happening here?
Ok, the problem was caused by a transition:
.slides .slide {
-webkit-transition: width 0.6s cubic-bezier(0.6, 0.65, 0.52, 0.97);
transition: width 0.6s cubic-bezier(0.6, 0.65, 0.52, 0.97);
}
The change in width actually triggered this transition, which frozen at the moment of generating the print view. After removing the transition, everything is working well.
This transition should not run however, as it's inside a print media query. I've submitted a bug report to Chromium for this and they acknowledged the issue.
I have a situation which only occurs on IE11. Chrome, Firefox, Safari (tablet and phone) all work as expected. I have created a transition for a panel(DIV) that slides in/out from the side. On pageload it should NOT "animate" but snap into the appropriate position. But on IE11 when the page loads the transition is "played" ONLY if there is a media query involved with that element matching the highest level of CSS specificity for the selector. The strange thing is that the media query is not even appropriate (should never be applied when the page is loaded in my test).
The following simple code duplicates my issue:
CSS
.standard {
transition: all 1s ease-in-out;
transform: rotate(45deg);
width:50px; height:50px; border:1px solid black; background-color:green; margin:3em;
}
button + .standard {
transform: rotate(30deg);
}
button.on + .standard {
transform:rotate(0deg);
}
/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
#media only screen and (max-width:800px) {
button.on + .standard {
background-color:red;
transform:rotate(270deg);
}
}
*/
HTML
<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard"> </div>
So if size of the browser window is greater than 800 pixels the media query should not be applied. However, IE11 seems to act like it applies the media query and then reverts back to the non-media query CSS which actually triggers the transition. If the media query content selector does not match the highest level of CSS specificity as defined outside the media query, the transition will not be observed on page load (in other words if my media query CSS selector was less specific [say button + .standard], you would not see the transition "played").
Any ideas how to prevent this transition from "playing" on page load using IE11 without having to write javascript?
Worked with MicroSoft support and logged a bug. There is a workaround for this issue.
Instead of using the media query
#media only screen and (max-width:800px)
change the query to be the following:
#media only screen and (min-width:1px) and (max-width:800px)
This should not be required (it should be implied) but placing the min-width in the query resolves the "PLAYING" of transition on page load. MS should fix it but since there is a workaround, the likelihood of a quick turnout is low.
Not a completely javascript free solution but you can add a class to the entire page on the body tag:
body.pageload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
and remove that class after the page has loaded
$("window").load(function() {
$("body").removeClass("pageload");
});
The answer of user3546826 works when the window is larger than the defined max-width. When the window is smaller than the transition is still animated by IE / Edge. This can be avoided with the following workaround (just an example):
#sidebar-wrapper {
position: fixed;
width: 240px;
bottom:0;
right:0;
top:50px;
overflow: hidden;
-webkit-transition: left 0.4s ease-in-out;
-moz-transition: left 0.4s ease-in-out;
-o-transition: left 0.4s ease-in-out;
transition: left 0.4s ease-in-out;
}
#media screen and (min-width: 768px) {
#sidebar-wrapper {
left: 0; /* define left here for IE / Edge */
}
}
#media screen and (min-width: 1px) and (max-width: 767px) {
#sidebar-wrapper {
left: -240px;
}
}