search

Jemt / SitemagicCMS

Sitemagic CMS - world's most beautiful Content Management System
http://sitemagic.org
Other
16 stars 11 forks source link

Input text invisible in contact form on mobile (iOS) #108

Closed Jemt closed 5 years ago

Jemt commented 5 years ago

Entering values in a contact form on an iOS device often results in letters remaining invisible until the input field lose focus.

Jemt commented 5 years ago

The problem is related to iOS and the use of -webkit-overflow-scrolling: touch which is applied to <body> because of another iOS fix. Unfortunately Safari is far from standard compliant.

Cause of problem: https://github.com/Jemt/SitemagicCMS/blob/ceff5a8a55f81c1a39f7006c16d6d8b575ebc34f/templates/_BaseGeneric2/mobile.css#L30

Unfortunately we cannot get rid of the fix since that would break support for fullscreen background images in Safari on iOS (or at least require a different implementation).

-webkit-overflow-scrolling: touch is known for causing changes to positioning and other things. In this case it seems the letters are invisible or somehow hidden behind the input field. The text cursor is also stuck on the screen while scrolling, indicating that some strange positioning is in effect. Applying position: relative; z-index: -1; to the input field having focus seems to solve the problem.

Jemt commented 5 years ago

Previous iOS fix was less than perfect. It made it impossible to select text in input fields. Reopening to have it fixed properly.

Jemt commented 5 years ago

Now properly resolved by enabling GPU rendering for input controls.