I'm trying to have a snippet of text "zoom & fade in" once the page is loaded. To do so, I'm creating a div with the text inside and setting it to transform immediately:
.whatIwantZoomed {
opacity:0;
/* Vendor Prefixes here */
transform:scale(4,4);
/* Vendor Prefixes here */
transition:transform 1s, opacity 1s;
}
Now, when called from my Javascript function, an animated class is applied which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Vendor Prefixes here */
transform:scale(1,1);
}
Now, on mobile Safari (both iOS 7 & iOS 8), the effect actually does work. The problem is the scaled text is actually larger than the width of the viewport, causing it to 'resize' and zoom the page out. As the animation occurs, the page resizes back to how it should be.
What I'm trying to do here is remove this unwanted viewport width alteration. I've tried setting the body to have a property of overflow-x:hidden; to no avail, and I can't seem to get the viewport metatag to help me either.
Can anyone shed some light on a solution here? Thanks.
EDIT: Added a fiddle demonstrating this. Notice the scrollbars in the HTML frame? That's what I'm trying to prevent.
Try this
DEMO
div {
text-align:center;
background-color:red;
transform-origin: 50% 50%;
transform:perspective(1200) scale(1);
animation:animated 1s ease-in-out;
}
#keyframes animated{
from{transform:scale(10);opacity:0}
}
For anyone coming across this, it seems to be related to this bug
The root cause is things that are off screen incorrectly trigger safari (or wkwebview) to resize the viewport.
Add this to your viewport meta tag:
shrink-to-fit=no
Related
I am currently developing an html5 app that will be displayed through an iOS webview. In order to use hardware-acceleration of the iPad, I have applied
transform: translate3d(0,0,0);
to all elements that are animated. This works fine and I can see the difference, however, whenever en element has an opacity transition (ie; fade in / fade out), it is still quite choppy, even though the element has translate3d applied. Am I doing something wrong or is there a different approach to optimize opaicty transitions for iOS?
probably using this:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
This question requires some explaining, so please bear with me.
Contrary to popular belief, inertia scrolling (the very smooth 60fps scrolling) is not enabled on web pages in Mobile Safari by default. As it makes a world of difference in user experience, I have enabled it by dynamically applying this CSS to the HTML and BODY element of the page, after a Modernizr test for iOS specifically:
<style>
.touchscroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
height:100%;
}
.touchscroll body {
height:100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
position:relative;
}
</style>
The above basically makes the body element a scrollable element and by means of -webkit-overflow-scrolling: touch, one gets the smooth intertia scrolling effect on the entire page. Some more background on this solution can be found here (disclaimer: article by myself).
It works, so far, so good. The problem is that this solution effectively disables another highly desired behavior of Mobile Safari: normally, when scrolling down, it will make the address bar smaller, and hide the bottom bar of the browser entirely. They re-appear when scrolling back up.
Unfortunately, the above technique disables this for some reason. Yes, we've got super smooth scrolling, yet the browser bar is always large and the bottom bar permanently stays visible, both taking up valuable space.
My question therefore is, can I have both? I want the super smooth scrolling on the entire page, yet I also want the default hiding behavior of browser elements when scrolling.
An example of a site where I am using this is here:
http://www.jungledragon.com/
If you open that in Mobile Safari, you will see the smooth scrolling, yet not the hiding of browser elements when scrolling down.
I think you're setting both the <html> and the <body> element to scroll. You should apply these CSS rules to 1 element you want to be able to scroll.
So either the html or body, not both.
I've run into an issue with CSS sprites used for a sidebar widget in our site. On the iPad with iOS 7.1, the sprites are all pushed down too far.
I have tried several other suggestions with no noticeable changes:
Specifying a background-size to prevent scaling (not a scaling issue)
Using background-clip and -webkit-background-clip to clip to padding box
Setting the viewport to minimum-scale=1.0, maximum-scale=1.0, as well as initial scale, disabling user scaling, etc.
You can see the icons on the following website:
http://eugenedining.com/featured-restaurants/
You'll notice it is only a vertical alignment issue. The icons are all in the right place horizontally. When you click on an icon, the active state (white on orange) does not shift around, althouhg it is still cut off. It is not a sizing issue.
I think the <span> element is actuall being pushed down by something.
Any ideas?
Preview:
So I guess there is a mysterious padding / linebreak issue of some kind that appears inside the <a> and before the nested <span> element.
Switching the span to absolute positioning has fixed the issue, but I'm still clueless where the extra space comes from.
Luckily most of my structure is done to the <a> element, so this was pretty straightforward to implement.
.tag-list li.tag-item a {
position: relative;
}
.tag-list li.tag-item a span {
position: absolute;
top: 0px;
left: 0px;
}
There is well known problem with media query width, which is not the same as viewport width in some browsers (WebKit browsers change the size of their CSS viewport when scrollbars are visible). I wanted to fix the problem by moving the vertical scrollbar from body or html to first wrapper div (as described on stackoverflow: https://stackoverflow.com/a/10091608/1647291).
The fix
Here's the fix with CSS:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
It moves the vertical scrollbar from body or html to the first div inside body. Thanks to that you don't need to worry about viewport widht in media queries.
The problem
But unfortunately this great method has one bad side effect - on iPad (and possibly on some other platforms too) page can't be scrolled smoothly. After you stop touching the screen it stops scrolling imediately, there's no smooth and slow easing.
This simple solution with CSS is much simpler and better than all those methodes with testing the viewport with javascript. Some of them are described here but they are not reliable or make the site works very slow:
CSS media queries and JavaScript window width do not match
http://github.com/tysonmatanich/viewportSize
http://github.com/ryanve/verge
Is there any way to use this CSS fix and make the iPad scroll correctly?
It is possible you are over thinking this. We make websites all day and this is not a problem. I think that you might be worrying too much about the specific px widths. If 680px vs 693px is a big deal, you are thinking about this the wrong way. I suggest you design mobile first and make a break point whenever it gets ugly (with ems). For sites with short pages and long pages, (causing the scrollbar to appear sometimes and jump between pages when there is no scrollbar) - to just add this and call it a day. Good luck!
html { overflow-y scroll }
Imagine the following setup:
<meta name="viewport" content="user-scalable=yes, width=640" />
Default CSS:
body { width: 100%; }
CSS change on some element (let's call it button-X) click:
body {
margin: 0 0 0 -webkit-calc(100% - 100px);
min-width: 640px;
overflow-x: hidden;
}
What does this do in desktop browser?
It shifts entire body almost 100% to the right. Horizontal scrollbar doesn't appear. You only see left part (100px) of the body positioned to the very right of your screen.
What does this do in iPhone 4S iOS 6.0.1?
There are two behaviors actually:
INCORRECT: If you just run Safari and click button-X it will start displaying your website at like 1200px instead of 640px.... shifted body will make entire viewport have 630px of blank space + body width = ~1200px. Even if body has position: absolute; or position: fixed; which in theory should allow positioning elements outside viewport but it doesn't. iOS makes viewport so large that your elements that are supposed to be off the screen are on the screen.
CORRECT: I wouldn't ask this question because maybe that's how it works and it can't be changed BUT there is fix for that so I assume it's a bug of iOS. If I run Safari and I tap it with 2 fingers and move them together (like to zoom out) and then click button-X it works perfectly. This action of tapping with two fingers doesn't change anything to viewport. Since viewport is set to 640px it will remain 640px after releasing fingers so literary nothing changes... but it starts working perfectly fine after this simple action.
The question is - how to perform this action (2) programmatically? I've tried:
jQuery(window).trigger('resize');
-webkit-transform-origin: 0px 0px; -webkit-transform: scale3d(1,1,1); zoom: 1;
How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
Interesting: it will make viewport ~1200px even if you set user-scalable: no
This didn't change anything. Basically I want absolutely positioned elements (or with overflow: hidden;) to be off the viewport like in desktop browsers.
Have you tried initial-scale=1, maximum-scale=1, user-scalable=no? Also, I think you are trying to fix it backwards. What is exactly the thing you want to do? Not the behaviour of the viewport or DOM elements, but the result website/webapp.
Anyway - in general, viewport is body. It's weird to make the body wider than the viewport and expect the body to clip itself. Try setting the body at a fixed width (not minimum, because this way it can get as much wide as it wants), and putting a div container inside the body, and apply your margin CSS change to the div, not the body - body should have the width set and overflow-x:hidden.