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;
}
}
Related
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);
}
}
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);
}
This is a strange problem that taken a couple of days worth of Googling many 'fixes' but am yet to find a solution to this strange problem. Here goes.
I have a fixed positioned Menu Button at the top of the screen that when clicked simply allows another fixed postion full screen menu to slide down from the top of the screen. Inspired by the solution at this site:
http://gardenestudio.com.br/
here is the css styles for the overlay menu which contains a single child ul as a test.
.overlay{
width: auto;
height: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(59, 69, 97);
transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
display: inline-block;
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
With the following 'SlideIn' and 'SlideOut' keyframes applied
#-webkit-keyframes overlayAnimateIn {
0% {
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
}
100% {
transform: translate(0,0%);
-webkit-transform: translate(0,0%);
}
}
#-webkit-keyframes overlayAnimateOut {
0% {
transform: translate(0, 0%);
-webkit-transform: translate(0,0%);
}
100% {
transform: translate(0,-100%);
-webkit-transform: translate(0,-100%);
}
}
However, the problem I am having is that on desktop the performance of the animation is fine.
But on mobile devices.. from Sony Xperia Z2 Compact (vanilla install) etc .. the performance of the animation is terrible.. for the first 10 seconds then after that time interval, the animation is smooth as silk. Note: the gardenstudio solution is smooth at all times.
I have gone through a number of optimisations and reductions of my CSS and HTML to try to find what is causing this problem.
looking at the http://gardenestudio.com.br/ example, i have reduced my stylesheet to around 800 lines (the minimum required to render the page correctly) and the HTML markup is 460 Lines (less than gardenstudio)
If I completely reduce the HTML (leaving the css) to virtually nothing, the animation is smooth.
If I reduce the css (leaving the markup) the animation is smooth..
Something tells me that there is something in my markup and/or css that is computationally expensive and causing a bottleneck.
Can anyone suggest any help finding the bottleneck or if there are any other suggested solutions, that would be great :)
Well after 2 and a half days of reducing, removing and optimising I have found the culprit for now.
We have a body content wrapper that has a Box Shadow applied to it.
Removing this Box shadow solved the problem and the animation is now smooth as anything.
I will continue to slowly re-add all the removed styles etc and report back if I find out why this is causing such a major performance hit.
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;
}
}
Preface
I'm trying to create a responsive website with a navigation menu that satisfies the following two requirements:
Navigation is fully visible in a normal browser window, laid out horizontally.
Navigation becomes a toggleable vertical menu for mobile devices and small screens, which animates between its "opened" and "closed" state.
I want performance to be good on mobile devices — especially on iOS — which means that the animation should use a GPU-accelerated translate3d transform CSS transition.
My Problem
Setting this up was a piece of cake, and for the most part it works great. I used z-index: 1 and transform: translate3d(0,-100%,0) to hide the menu behind a header with z-index: 2 in its default closed state, and then transform: translate3d(0,0,0) to animate the menu to its opened state.
But I'm just having one problem: When I resize my Chrome browser window and the mobile media query kicks in, the menu animates from an opened to closed state.
Resize your browser window to less than 600px wide to see the problem in action:
Fullscreen jsfiddle: http://fiddle.jshell.net/ymDYG/1/show/
Original jsfiddle: http://jsfiddle.net/ymDYG/1/
I think I know why this is happening: when the mobile media query kicks in, the browser sees that .nav is not currently active, so it animates it to the default closed state. I've tried experimenting with using display:none and display:block for the different media query states, but that seems to completely break the animation.
How can I prevent the nav menu's "closing" animation from firing as the browser window is resized?
Nice job, very clean. Can i steal it? :-)
Anyway, here's your solution with a demo.
I just moved the transition to another class:
.nav {
/* stuff */
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
Which you can add to the element at first "Toggle":
function toggle(){
$(".nav").addClass("activated").toggleClass("active");
}
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again, you could use Modernizr's mq method:
$(window).on('resize',function(){
if(Modernizr.mq('(min-width:600px)')) $(".nav").removeClass("activated");
});
Referring to the side effect that Giona mentioned:
P.S. If you don't want the transition to happen even after the user has opened the menu and then resized the window again (...)
there is a cleaner way to fix this without firing on each resize event. You can remove the class resposible for transition after the transition end (full demo here):
$(function()
{
$(".nav").on("transitionend", function() {
$(this).removeClass("activated");
});
}
)();
By combining answers from Giona and Janusz Kacalak (and Justin Bull's comment), we can further optimize the code so that the nav bar will never animate from an opened to closed state (not just for the first time, which is what Giona's code does).
function toggle() {
var navbar = $(".nav");
if (navbar.hasClass("active")) {
// Closing the nav bar.
navbar.removeClass("active");
// Listening for a transition.
// Use `.one` here because we only want this to be called once.
navbar.one(whichTransitionEvent(), function() {
// Remove animation property after the nav bar is closed.
navbar.removeClass("activated");
});
} else {
// Opening the nav bar.
navbar.addClass("activated").addClass("active");
}
}
// Ref: https://davidwalsh.name/css-animation-callback
function whichTransitionEvent() {
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
}
body { margin: 0; }
.toggle { display: none; }
.nav { list-style-type: none; margin: 0; padding: 0; }
.nav li { float: left; margin: 0; padding: 20px; background: #fdd; }
.nav li:nth-child(2n) { background: #dfd; }
#media only screen and (max-width: 599px)
{
.toggle {
display: block;
position: relative;
z-index: 2;
padding: 20px;
background: #eee;
}
.nav li {
display: block;
float: none;
}
.nav {
display: block;
position: relative;
z-index: 1;
transform: translate3d(0,-100%,0);
-webkit-transform: translate3d(0,-100%,0);
}
.nav.active {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
.nav.activated {
transition: transform 400ms linear;
-webkit-transition: -webkit-transform 400ms linear;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Toggle menu
<ul class="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>