Tabbing through input fields in mobile Safari makes browser jump - html

Is there a way to focus on the field, but without this jarring animation? The behavior is especially bad when the keyboard is visible.
Demo
http://plnkr.co/edit/9OydOFO0KUeKuaH8u70A?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form>
<input>
<input>
<input>
<input>
<input>
...
<input>
</form>
</body>
</html>

After some more research, this appears to be related to a focus jumping bugs in iOS. (https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#focus-jumping)
One neat trick that fixed it some instances was to set float: left; clear: left; on the input field (Jumping input fields in Safari)
But that fix doesn't work if it needs to interact with a position: fixed element. The jumping bug persists.

Related

min-height style not working on button unless other style is present

In the following HTML, the min-height style property does nothing in (my versions of) Chrome and Safari on Mac, but does work in Firefox:
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;'>
hello
</button>
</body>
</html>
I have also noticed that the min-height property takes effect in Chrome and Safari if some other unrelated property is added to the button, such as background-color:#abc;.
Is this some known webkit bug, possibly part of a larger class of bugs I should be aware of? Or not a bug at all?
Thanks!
It's working on my side. Please try with this
<html>
<head>
<style>
</style>
</head>
<body>
<button style='min-height:50px;display:inline-block'>
hello
</button>
</body>

Styles work differently based on if they're inside the html head tags or not?

I'm trying to make a fairly simple site which there's a div with some text inside, centered both horizontally and vertically on the page.
I wouldn't have thought this would be that difficult to do, but something quite weird's happening. Here's the source that does work. Let's call this source A.
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
and here's the source that doesn't work. Let's call this source B.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jacob Garby</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
</head>
<body>
<div class="wrap">
<div class="content">Test</div>
</div>
</body>
</html>
They both use the same stylesheet, which is here:
* {
font-family: 'Josefin Sans';
margin: 0;
padding: 0;
}
div.wrap {
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}
div.content {
border: 1px solid red;
text-align: center;
width: 100%;
}
And the problem is that the div.wrap is only vertically aligned when I link to the stylesheets outside of the html head tags. This is the only difference between the source that works and the source that doesn't.
I know that you're meant to include source inside the head tags and that's why I think it's so strange that it only works when I do the opposite of this.
I would include a link to some exampls on jsfiddle or something, but the problem is how I'm including the stylesheets, which jsfiddle doesn't let me change.
I've tried this on all of the browsers I have (Opera, Firefox, and Chrome,) and the problem persists between them.
Is this some sort of HTML bug? Or am I making some obvious mistake?
Here are some screenshots.
Source A:
Source B:
I viewed the source in a web browser, and even when I link to the stylesheet outside the head, it seems to put it in there. So, in both examples, when actually viewed, the stylesheet is automatically being put in the head tags.
If my question isn't clear, it's basically this:
Why is this strange behavior happening, and how can I fix it?
It's not strange but your HTML is invalid by doing it that way in A.
Browsers are required to do the best they can with invalid markup. The problem with that, of course, is that you are relying on the browser to guess correctly at your intentions so don't write invalid markup.

Input text jumps a bit in IE11

There is a simple example with 2 inputs. One with custom google font and another with default browser font.
https://plnkr.co/edit/kh7KbhdLjjDn6niy8rzt?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
</head>
<body>
<input type="text" value="jgyq">
<input type="text" value="jgyq" class="custom-font">
</body>
</html>
input {
font-size: 16px;
}
.custom-font {
font-family: 'Open Sans';
}
If you try to select input text and drag to top or bottom, you will notice that input text jumps 1-4px to top or bottom (depend on line-height, height input attributes actually, but jumps always)
Have tried different compinations of padding, line-height, height properties.
I used line-height:1.2; + padding:6px 0; properties to have crossbrowser input (height) in the past. Is there any other good way to set crossbrowser text input withut such jumps and other problems. (IE11+, and modern Chrome, FF, O)

Chrome: input text element loses vertical alignment after copy / paste

I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.
If i remove the font-size property from style, the effect does not appear.
Is that a browser bug, or am i doing something wrong with the style attribute ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.
I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>

What's going on with z-indexing here of inputs in IE8?

I am trying to layer 2 inputs on top of each other in HTML. In most browsers (Safari, FF, IE7) I do this with the following code and it works fine so that the second input is placed on top of the first with the lighter text color, and when you click in the area the focus goes to it. In IE8 however, the first one appears to be over the second one, so that when you click it and start typing you see the lighter colored text.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css" media="screen">
input {
background-color: transparent;
}
</style>
</head>
<body>
<input style="position:absolute;z-index: 1;color: #dedede;">
<input type="text" style="position:relative;z-index: 3;">
</body>
</html>
The problem seems pretty similar to that one, so I think you'll have to wrap a <input> into a <div> with higher z-index.