iOS Text & Images Blurred when using webkit-overflow-scrolling: touch
The issue you were seeing is due to the default zooming of the ipad. Paul's response was on the right track but also unnecessarily disables user zooming. You just need to correctly set the initial scale and width of your screen.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
For my test case, try opening these two pages on an ipad:
http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/blurred.html (Blurred)
http://www.jasonbuckboyer.com/playground/ios/overflow_scrolling/not_blurred.html (Not Blurred)
CSS3 property webkit-overflow-scrolling:touch ERROR
As @relluf pointed out, applying 3D transitions on the relative element fixes the bug. However, I investigated it a bit further and it seems that applying -webkit-transform: translateZ(0px)
works too (this is what Google does on gmaps map container) and it does not need to be on the relatively positioned element, just the direct descendant of the scrollable element.
So if you don't want to manually keep a list of all the places where the fix is needed, you just might do:
element {
-webkit-overflow-scrolling: touch;
}
element > * {
-webkit-transform: translateZ(0px);
}
Mobile web: -webkit-overflow-scrolling: touch conflicts with position:fixed
After two days struggling, I found this post saves me: 100% screen height css.
I have to limit the height of my content area to be the same height of the screen. Please find the working demo here: http://jsbin.com/tubaqaqumi/3/ (visit from a real phone; a Chrome simulator doesn't tell the difference).
Elements disappear when scrolling in Safari - -webkit-transform fix only works the first time
So since this well-known Safari issue only occurs on elements with position: relative, I ended up fixing the issue by setting position: fixed
on the scroll container element. No need to add -webkit-overflow-scrolling: touch
or -webkit-transform: translate3d(0,0,0)
.
As mentioned in the question part, -webkit-transform: translate3d(0,0,0)
fixed the issue, but only for the first time the menu was opened. Once it was closed and reopened without a page refresh, the issue would occur as though no fix was applied at all.
If you're dealing with this same issue, consider using position: fixed
. If you're experiencing this issue with an element that is shown and hidden by the user (like a hamburger menu), you should be okay to set position: fixed on the parent scroll container that is shown when the user invokes it.
iOS textarea text hidden when using -webkit-overflow-scrolling: touch
This issue is triggered by the textarea element within a container using:
-webkit-overflow-scrolling: touch
in its parent container.
Removing the class solves the problem with the 'initially hidden text not loading' but losing desired inertia scrolling UX.
Adding
-webkit-transform: translateZ(0px)
to the style of my affected textarea elements solves my problem.
In my particular case I dont believe I will incur in prohibitive performance penalties since my hidden elements that I am yet to scroll to wouldnt be loading rich content (videos/animations/etc) that would tax the VRAM on the mobile device. I am basically taking advantage of the additional rendering context (hardware assisted) being triggered by this, which makes my text render normally, and thus bypassing an iOS BUG.
Great information on translateZ (and its close cousin translate3d(0,0,0))
http://aerotwist.com/blog/on-translate3d-and-layer-creation-hacks/
Related Topics
CSS Styled Scrollbars Support for Safari Mobile on iOS 6 Disappeared
Swift - Apply Local CSS to Web View
Swift Modal View Controller with Transparent Background
How to Open Maps App Programmatically with Coordinates in Swift
Launching Viber App via Url Scheme on iOS
Rotating a View in Layoutsubviews
How to Set Image in Tabbar Not Tint Color in iOS
How to Get Navigation Based Template Functionality in Swift Programming
Swift Uicolor Initializer - Compiler Error Only When Targeting Iphone5S
Catch an Exception for Invalid User Input in Swift
How to Cache or Preload Sklabelnode Font
Downloading Uiimage via Alamofireimage
Which Is the Best Way to Estimate Measure of Photographed Things
Setneedslayout and Setneedsdisplay
iOS Localization: Unicode Character Escape Sequences, Which Have the Form '\Uxxxx' Does Not Work