2

There's something wrong with various input fields, when I type on iOS mobile safari (only) the text is invisible.

However for this section of the site, I cannot target via CSS it as it's an iframe.

Any ideas of

  1. why does this happen?
  2. how to resolve it?

I have to force a blur or the GPU by adding transform: translateZ(0); in order to resolve it. However I cannot use CSS on this element.

gif of issue

Scriptable
  • 19,402
  • 5
  • 56
  • 72
Adam
  • 41
  • 1
  • 8
  • have you tried this https://stackoverflow.com/questions/32851413/input-field-ios-safari-bug-cant-type-in-any-text ? – Soothran Aug 13 '19 at 07:37
  • Try to apply CSS with this. https://stackoverflow.com/questions/3714880/how-to-apply-css-to-iframe-content – TOMBA Aug 13 '19 at 07:41
  • 1
    I can't target the element's CSS so I can't add this property. Looking at the `input` CSS there is `user-select: text !important;`so I'm not sure this is it.. – Adam Aug 13 '19 at 07:42
  • I attempted to use JS to target but i feel like it's layering unstable fixes instead of resolving the original issue.. – Adam Aug 13 '19 at 08:05

1 Answers1

1

Placing 

-webkit-overflow-scrolling: touch;

Causes the issue, I believe it's due to the way Safari handles scrolling / layering with this switched on. The way to fix it is to force the GPU using 

transform: translateZ(0);

On the parent element that can be controlled.

Adam
  • 41
  • 1
  • 8