word-break : keep-all;
overflow-wrap : break-word;

CSS에서 단어단위로 줄바꿈을 하고 싶을 때 word-break:keep-all;을 사용한다.

문장에 띄어쓰기가 없는 긴 문장일 경우 안드로이드에서는 자동으로 줄바꿈을 해주지만 ios에서는 줄바꿈이 되지 않고 넘쳐버린다.

그럴 때 overflow-wrap:break-word;를 추가한다.

Prepare for viewport resize behavior changes coming to Chrome on Android https://developer.chrome.com/blog/viewport-resize-behavior/

11월 크롬 108이 출시되면서 크롬은 화면 내 키보드(OSK)가 보여지면 레이아웃 뷰포트가 어떻게 행동하는지에 약간의 변화를 줄 것이다. 이러한 변화로 안드로이드의 크롬은 더 이상 레이아웃 뷰포트를 크기화하지 않고 대신 비주얼 뷰포트만 크기화할 것이다. 이것은 안드로이드의 행동에 대한 크롬을 iOS의 크롬과 iOS의 사파리와 대등하게 만들 것이다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">

ios 웹뷰 스크롤 튕기는 모션
(관성 스크롤, bounce scroll)

네이티브앱 웹뷰에서 나타난 현상으로,
웹뷰 기본 body 스크롤에서는 바운스가 안생기는데
div에 overflow를 주어서 만든 내부 스크롤에는  ios 폰 특유의 바운스 현상이 생기는 경우가 발생하였다.
(기본 body 스크롤의 관성은 네이티브 자체에서 제거하였다.)

overflow-y:scroll;
-webkit-overflow-scrolling:auto;

기존에 제어했던 방식이다.
관성이 필요 없는 경우 auto, 필요한 경우 scroll을 사용하였다.

웹뷰를 바꿔서 그런지 ios가 업데이트를 해서 그런지 구버전은 여전히 위의 속성이 잘 되지만, 요즘 폰에서는 작동하지 않았다.

위 속성은 모질라에서도 작동되지 않을 수 있으니 사용하는 것을 추천하지 않는다고 한다.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

그래서 찾아본 방식이 아래의 방식이다.

overflow-y:scroll;
overscroll-behavior:none;

https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
기본적으로 모바일 브라우저는 페이지(또는 다른 스크롤 영역)의 상단 또는 하단에 도달할 때 "바운스" 효과 또는 심지어 페이지 리프레시를 제공하는 경향이 있다. 또한 스크롤 콘텐츠가 있는 페이지 상단에 스크롤 콘텐츠가 있는 대화 상자가 있을 때 대화 상자의 스크롤 경계에 도달하면 기본 페이지가 스크롤되기 시작합니다. 이것은 스크롤이라고 불립니다. 스크롤체인.

경우에 따라서는 이러한 행동이 바람직하지 않다. 사용하실 수 있습니다. overscroll-behavior 원치 않는 스크롤 체인링과 브라우저의 페이스북/트위터 앱에서 영감을 받은 "리프레시 당김" 유형의 동작을 제거합니다.

반대로 위 방식은 구버전 폰에서 작동하지 않는 것을 확인하였다.(15.4이상) 두 방식 모두 적용되지 않는 경우가 있어 더 연구가 필요하다.