Vertical scrollbar is not displayed correctly after editing DOM or CSS via JavaScript
Reported by
potassiu...@gmail.com,
Nov 10
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.77 Safari/537.36 Example URL: http://sinst.html.xdomain.jp/zengaku/jkkn/chrome_bug9.html Steps to reproduce the problem: 1. Place a div box with max-width, max-height and a style of "overflow:auto". 2. Insert text that doesn't overflow. The number of lines should be numerous enough to fill the box. 3. Change text and make it overflow horizontally from the box using JavaScript. Please show the attached video. What is the expected behavior? When the text overflows horizontally, a horizontal scroll bar is displayed. Then, the height of the "innerHTML" shrinks by the height of the horizontal scrollbar. So a vertical scrollbar should appear by the amount of the shrinking height. It works fine on IE, Edge, Firefox, etc. What went wrong? Only a horizontal scrollbar appears, and the vertical scrollbar doesn't appear in Chrome. By running the same script twice, the vertical scrollbar appears correctly. Please show the attached video. Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 70.0.3538.77 Channel: n/a OS Version: 10.0 Flash Version:
,
Nov 10
The same bug occurs at http://sinst.html.xdomain.jp/zengaku/jkkn/chrome_bug9_2.html by editing CSS via DevTools (F12). Please show the attached video:
,
Nov 10
,
Nov 12
Can anyone reproduce this?
,
Nov 12
Able to reproduce the issue on reported chrome version #70.0.3538.77 and latest canary 72.0.3602.0 using Windows 10 and Ubuntu 17.10 by following steps as per comment#0 and comment#1. Note: For Windows, the issue got reproduced using "http://sinst.html.xdomain.jp/zengaku/jkkn/chrome_bug9.html". For Linux, the issue got reproduced using "http://sinst.html.xdomain.jp/zengaku/jkkn/chrome_bug9_2.html". The issue is not seen on Mac OS. The behaviour is seen from old M-60builds (#60.0.3112.113). This is a non-regression issue, hence marking it as untriaged and requesting someone from the dev team to look into the issue. Thanks.!
,
Dec 10
Thank you for attaching a simple one! tc.html makes easier to understand this issue. I've also uploaded the file on http://sinst.html.xdomain.jp/zengaku/jkkn/tc.html
,
Dec 10
The engine that powers Edge is being changed from EdgeHTML to Chromium's Blink. The same bug will occur in Edge in the future, so it is desirable to fix it.
,
Dec 11
I think that calculation of the width and height when displaying the scroll bar is not enough. However, there is a possibility of going into an infinite loop if too much calculation procedure is added. So it is difficult to implement, is it? Many browsers such as Opera and Vivaldi have already adopted Blink, because the same bug occurs in all of them. Ironically, the only browser that can handle this correctly is going to be Firefox, if Edge adopts Blink.
,
Dec 11
* Safari (macOS) and mobile browsers don't have scrollbars so this issue does not matter. |
|||
►
Sign in to add a comment |
|||
Comment 1 by potassiu...@gmail.com
, Nov 10* Please try this by copy-paste: document.getElementById("box").innerHTML="abcde<br>abcde<br>abcde<br>abcdefghijk" * Please also try this: document.getElementById("box").style.whiteSpace="pre" at http://sinst.html.xdomain.jp/zengaku/jkkn/chrome_bug9_2.html