iOS 11 has issues with inputs inside a fixed container more here, specifically with iOS 11 on focus + the keyboard cursor is misaligned to the input:
I have an element .rn-drawer that ought to be fixed to the top of page, while the rest of the page content is scrollable. The fixed element contains an input.
.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
By simply applying the following .iOS-fix to the parent/root container I can resolve the misalignment of my input to keyboard.
.iOS-fix {
position: fixed; // causes jitter on scroll, but resolves fixed input alignment bug
/*position: sticky; // no jitter, but doesn't resolve fixed input alignment bug*/
/*transform: translate3d(0, 0, 0); // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
overflow-y: scroll;
height: 100%;
width: 100%;
}
BUT there is a really bad jitter/stutter on scroll, which after some research I believe that a solution for this is forcing GPU acceleration in the CSS by applying a transformation.
Ok, this solves this jitter and the fixed input alignments issue BUT now the postion:fixed; on .rn-drawer no longer applies; as transformations change the coordinate system for children elements (and thus my drawer is not fixed).
position: sticky; stops the jitter, but same issue with input misalignment.
Is there any viable solution that will solve the input alignment bug, but also allow my input container to be fixed AND not cause any jitter on scroll?
Thanks.
Related
I am looking at making an animation using auto-animate and 2 slides.
The animation is made of 5 images.
Using <image> stack me the images on an horizontal line .. using divs stack them vertically.
I would like the second slide to arrange the images on a diagonal.
The best for me would be to position the images freely but I don't know how to do that :( ?
To position an item in CSS, try this:
<style>
#image1 {
position: absolute;
top: 100px;
left: 100px;
}
</style>
<img src='my-image.jpg' id='image1'/>
See https://www.w3schools.com/cssref/pr_class_position.asp for more details.
:)
I have an iframe inside a popup for some reason in mobile safari once the iframe loads it's changing the size of the iframe to go beyond the screen dimensions and no matter what I do in inspector the computed style won't update.
The style that inspector shows is taking effect is (and works everywhere else including android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
However, in mobile safari the "computed height" and "computed width" are way off (depending on which popup you initiate) they're up as high as 3000px tall and 700px wide. Inspector does not have the height: 900px or the max-height: 90% crossed out and even if I put style="width: 300px !important; height: 300px !important" directly on the iframe tag the computed values are still going past these values with no indication as to why.
Any clues?
Click on any of the campus tour links (as I said, it works as expected everywhere but mobile safari - even android)
http://www.georgiancollege.ca/new-campus-tours/
In one of my projects, Safari Computed Rules were not matching the Styles Rules. And like, you even adding !important directly to the inline style did not help.
The culprit turned out to be too many transition effects on the page. The transitions were on inputs and textareas (which we manipulated a lot with JS). Changing to this helped me out.
transition: none;
I have two containers which are positioned absolutely one below the other like so:
<header>
<div class="vcenter">
...
</div>
</header>
<div id="wrapper">
...
</div>
CSS:
header {
position: absolute;
top: 0;
height: 70%;
}
.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}
#wrapper {
position: absolute;
width: 100%;
top: 70%;
}
I'm centering .vcenter vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the site I'm working on. .vcenter is the container of the logo.
I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...
Thanks in advance for your thoughts.
Desktop Screenshot (how it should be):
IOS-Simulator Ipad Screenshot (how it should't be):
I can't really explain it, but using position: absolute seems to fix your problem:
.vcenter {
position: absolute;
margin-top: -50px;
top: 50%;
width: 100%; /* needed to add to fix horizontal positioning */
}
I think it has something to do with using absolute positioning and percentages on the header. If you inspect the height of the html & body, they aren't actually as tall as your content - so maybe computing a 50% positioning for the vcenter is getting messed up. Not sure...
Have you tried using the transform solution? It generally covers your bases for things like iOS rendering issues (of which there are several more than just this scenario).
Write your class like this (it'll break for IE9 and below, but that's what browser shimming is for and you can use your existing code for the shim using Modernizr)
.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That should render .vcenter at the vertical center for all modern browsers as well as iOS Safari.
I can't figure out how to bottom-align the WHITE "LIKE" DIV div in this illustration, so it appears at the very bottom of the comment, instead of floating up, when the user only wrote a few lines in his post.
Need advise on either CSS or HTML approach to this, depending on which will do the job.
http://bibelkristna.com/viewtopic.php?f=7&t=12 has some likes.
In order to see the likes, use thastrom/test123
Check out this answer obtain from similar question, that was previous asked.
#b {
position: relative;
}
#c {
position: absolute;
bottom: 0px;
}
The trick is position: relative; on the parent element. Without that, #c will float away to the bottom of the page.
The logo on my friends website is working properly in all browsers yet when I open up my iPhone or iPad (actual devices) it's all wonky.
<img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">
It's not placed in any containing div. Just on it's own.
CSS
.averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }
I'm not quite sure why it works everywhere else but doesn't center on my iPad or iPhone properly.
This is what it's looking like, but only on the iOS.
What am I doing wrong?
Give #main-navigation position:relative; otherwise the logo is positioned relative to the body, which is resized on your smaller device.
Chris Coyier has an article about it.
Use margin-left: auto and remove left: 50%.
You may want to add text-align: center to #main-navigation for IE.