6

I want edit content inside "contenteditable element" on #ios. In that element is more text.

Steps

  1. I scroll smoothly to the selected text
  2. I touch into element and that open keyboard
  3. I touch and select multi lines of text and format it to bold
  4. I want scroll content now but it's not smoothly anymore

Here is playable code:
https://console.webcloud.io/profile/bruno.onlyme@gmail.com/_playwithcode/contenteditable-scroll-after-format/index.html

Video preview here.

<html>

<head>
    
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no">
    
    <style>
        
        body {
            font-size: 24px;
        }
        
    </style>

</head>

<body>
    
    <button>button</button> | <a onclick="console.log();">anchor</a><br>
    <br>
    
    <div contenteditable>
        What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        
        Why do we use it?
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    <br>
    
    <button>button</button> | <a onclick="console.log();">anchor</a>
    
</body>

</html>

After a huge investigation I figure out that this issue is in S CH FF, Opera somehow solve it but not work another things correctly. This issue is in every known editor #ckeditor5 #medium #alloyeditor too.

"Smooth scroll" is restored only on 2conditions

  1. if keyboard is hidden and repeatedly opened by touch into any "contenteditable element"
  2. if I touch any other "clickable element"

Tested in

  • NOK iphoneX ios11.4
  • NOK iphone6 ios11.4
  • NOK iphone6 ios11.3.1
  • NOK iphone5s ios11.4
  • OK iphone5s ios11.3.1
  • OK iphoneSE ios11.4
  • OK iphoneSE ios9.3.2

INFO @31.05.2018 - apple bug reported but no response from them

INFO @15.06.2018 - new trigger event - select more rows https://bugs.webkit.org/show_bug.cgi?id=186333#c2

INFO @25.06.2018 - I create a new test where #contenteditable is inside #iframe and "smooth scroll" works only if I after open #keyboard scroll up down, then I can format, still after that smooth scroll - after close keyboard and reopen it didn't work - I think it's all about that "virtual space" what "keyboard create" and it's need some kind "refresh dimensions".

Q does anyone have any idea how to keep "smooth scrolling"?

Bruno
  • 6,623
  • 5
  • 41
  • 47

1 Answers1

0

I am not sure if this even has anything to do with your problem, but I am running the website on iOS 9.3.2 (I know it's old) on an iPhone SE and it is working perfectly fine for me.

Not only is the website scrolling smoothly while the keyboard is closed, but also while the keyboard is open and while text is selected as well. I tested this process multiple times on my phone within Safari and Google Chrome as well.

This might not be a helpful answer (as I am new to StackOverflow in answering I don't know if answers like this can be helpful as well), but I figured, it might help you as a feedback.

Trixx
  • 66
  • 4
  • nice answer @Trixx thx - you mentioned "while text is selected as well" - Q but what if you "select 3lines" and "format them to bold"? – Bruno Jun 05 '18 at 19:53
  • Even if I select multiple lines (also 3 as you asked for) and format them to bold it seems to work absolutely fine. If you want me to I can make a video for you to check it out. – Trixx Jun 05 '18 at 22:06
  • To show you how it looks on my phone I recoreded it with Safari as well as Google Chrome. Eventho it seems to lagg with Chrome at first I am almost certain, that this was the normal lag of the recording as well as the fact, that I just launched the Google Chrome app just for this link [Here is the video](https://drive.google.com/file/d/1kxrxKiJrwn9XOPLOOl2rbtr9UXT2nSqE/view?usp=sharing) – Trixx Jun 05 '18 at 22:19
  • ouh wow thanks so much ! hope it has something to do with the iphone and it's framework or the version of safari – Trixx Jun 09 '18 at 12:45