I have a webpage whose width is over 1000px wide. There is a background DIV element that spans across the entire width
.bg_horizon {
position:absolute;
width:100%;
height:800px;
background-color:#f7f7f7;
border-bottom:1px solid #8d9092;
z-index:-9999;
margin:0;
padding:0;
}
This box renders fine in landscape orientation and on desktops, but on ipad portrait mode the webpage is wider than the viewport... this is fine, as the user can just pan around, we don't allow scaling... but the background div only rendered the css width:100% up to the visible portion of the viewport. When I pan around, I can see the rest of the webpage but the div did not extend into those areas. How can I get width:100% to span across the entire webpage?
iPad screen width is 1024px so try adding:
html {
min-width: 1024px;
}
Related
I am using React and create-react-app to create and app and in said app I am using a sidebar that I have translated off the page when the screen-size is at 768px which will be translated onto the page with a click of the hamburger
.sidebar {
transform: translateX(-180px);
position: absolute;
overflow-y: visible;
background-color: #202020;
transition: .5s;
z-index: 10;
}
.sidebar.is-active {
transform: translateX(0);
}
this works perfectly on firefox and chrome browsers but when I use ipads and iphones to check, when I click the hamburger, it only shows the sidebar up to the height of where the page was and will not scroll down any more,
however, when I go off the safari app and back in, the sidebar is fully visible and I can scroll past the height of the component.
Why is this occurring and how do I make it so that I don't have to exit and reload the safari app?
I needed to put my body (parent) as position: relative and this seemed to solve the issue
I've created a modal on my app which the content is designed to fit onto the Iphone 6. However when I open the modal on the Iphone 5s, the content text is too big. Is there a way in the CSS to make the app resize the text based on the phone its on?
Currently I have in the CSS:
.firstParagraph {
float: right;
margin-left: 80px;
font-size: 12;
}
You could use:
font-size: 20vw;
To make the text 20% av the screen width no matter the device. (Modern device that is).
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
I am making a website in which there is a background image which fills the entire screen. It works fine on desktop browsers, but does not render on an iPad. Here is the css:
body {
background: url('pics/net.png') no-repeat center center fixed;
background-size: cover;
}
The html is really just a panel that appears above the image. Any tips would be appreciated.
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.