Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari in ios8 is scrolling screen when fixed elements get focus

In IOS8 Safari there is a new bug with position fixed.

If you focus a textarea that is in a fixed panel, safari will scroll you to the bottom of the page.

This makes all sorts of UIs impossible to work with, since you have no way of entering text into textareas without scrolling your page all the way down and losing your place.

Is there any way to workaround this bug cleanly?

#a {   height: 10000px;   background: linear-gradient(red, blue); } #b {   position: fixed;   bottom: 20px;   left: 10%;   width: 100%;   height: 300px; }  textarea {    width: 80%;    height: 300px; } 
<html>    <body>    <div id="a"></div>    <div id="b"><textarea></textarea></div>    </body> </html> 
like image 772
Sam Saffron Avatar asked Mar 12 '15 04:03

Sam Saffron


People also ask

Why does Safari get stuck scrolling?

The most common reason for Stuck Safari Browser on iPhone is due to the Safari Cache being clogged up with outdates files. 1. Open Settings > scroll down and tap on Safari.

Does focus scroll?

An element can be focused by either using the autofocus="true" attribute or calling the element. focus() method. In both cases, the browser will automatically scroll the element into the viewport.

What is Webkit overflow scrolling?

The -webkit-overflow-scrolling CSS property controls whether or not touch devices use momentum-based scrolling for a given element.

How do I scroll to the bottom of the page in Safari?

If you use an external keyboard, ⌘ cmd ↓ will scroll to the bottom of the page, and ⌥ opt ↓ will scroll one page down.


Video Answer


1 Answers

Based on this good analysis of this issue, I've used this in html and body elements in css:

html,body{     -webkit-overflow-scrolling : touch !important;     overflow: auto !important;     height: 100% !important; } 

I think it's working great for me.

like image 69
Mohammed AlBanna Avatar answered Sep 22 '22 23:09

Mohammed AlBanna