Issues on iPad

[junghoocho]

When I open the upmath.me editor in a browser on my iPad (iOS v11.3, both in Chrome or Safari), the markdown panel (the editor panel on the left) is rendered incorrectly. All text is “printed twice,” misaligned with each other. See the attached screen capture.

I opened the same editor on Mac and Android, and I don’t experience the same problem. So far it seems to be an iOS-specific issue.

[parpalak]

I've tried to figure out why this happens and haven't succeed. Unfortunately I have no iOS devices to debug the markup. Later I'll try again to do something.

[parpalak]

Well, I've found a report of a bug in iOS browsers: https://stackoverflow.com/questions/6890149/remove-3-pixels-in-ios-webkit-textarea Could you please check if that workaround helps? You can try it here: https://beta.upmath.me/

[junghoocho]

Thank you! The beta site works fine on my iPad. It still does not work well on my iPhone, but I assume you added the workaround only for iPad? Thank you.

[junghoocho]

This is how it is now on iPad.

[junghoocho]

It seems that adding the following media query rules to editor.css makes the editor work on all my devices (Android Chrome, macOS Chrome and Safari, iPad and iPhone Safari and Chrome)

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  textarea {
    margin-left: -3px !important;
  }
  textarea::placeholder {
    padding-left: 3px;
  }
}

The logic for checking "-webkit-overflow-scrolling" attribute is that only iOS mobile safari supports this attribute. (See https://stackoverflow.com/questions/30102792/css-media-query-target-only-ios-devices)

[parpalak]

That's weird. I've tried margin-left: -3px !important; and obtained the following result on BrowserStack:

As we see, an additional adjustment is required on the right.

My last fix is

if(/iPhone|iPad|iPod/i.test(navigator.userAgent)){
  textareas = document.getElementsByTagName('textarea');
  for(var i = 0; i < textareas.length; i++){
    textareas[i].style['padding-left'] = '13px'; // was 16px
    textareas[i].style['padding-right'] = '13px';  // was 16px
  }
}

It gives the right result:

I don't know why the rendered pictures are different. What iPhone do you have? What iOS version?

[junghoocho]

This is how the page https://beta.upmath.me looks on my iPhone now. It looks almost perfect but slightly off. On my iPad, it works perfectly. I am OK with as it looks on my iPhone, since it is mostly a cosmetic issue and I primarily use iPad. I have an iPhone 6 with iOS 11.3

[moughxyz]

In addition to the 3px issue, I found that on mobile Safari, the underlay text is rendered with different line breaks. For example, with the sample text Create web articles and blog posts with equations and diagrams, the textarea would render posts with equations on one line, while the underlay would render posts on one line and with equations on another line.

The solution was adding:

pre.ldt-pre {
  -webkit-nbsp-mode: space;
}

combined with:

@supports (-webkit-overflow-scrolling: touch) {
  .ldt pre {
    margin-left: 3px !important;
  }
}

That seemed to have fixed the issue completely.

[parpalak]

Thanks for reporting, I'll try to apply the -webkit-nbsp-mode rule.

[parpalak]

Sorry for delay, but I cannot reproduce the issue:

[moughxyz]

I just launched the iPhone X simulator running iOS 12.1 and got this:

This is related to -webkit-nbsp-mode.

[parpalak]

Well, I've tested the site on a real device. As you can see, it works fine in both Safari and Chrome: