New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 757676 link

Starred by 1 user
Status: Assigned
Owner:
einbinder@chromium.org
Cc:
█ hdodda@chromium.org
kkaluri@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 3
Type: Bug



Sign in to add a comment

"Computed" tab shows wrong styles on elements

Reported by collapse...@gmail.com, Aug 22 2017 
Chrome Version       : 60.0.3112.101 (x64)

There is a <div> with id test and lorem100 inside of it.
This div has this style:
#test {
    width: 300px;
    height: 200px;
    margin: 25px;
    padding: 20px;
    border: 25px solid #777;
    overflow: auto;
  }

So, the style "overflow: auto;" there goes a scroll-bar, that has to (or not) absorb some pixels (16-17px) from the main text field. And it does, in fact. We can see in "Elements -> Computed" that instead of width:300px, the main field now has width:283px.  So, the scroll-bar took 17px. But, if you will hover on that little blue rectangle in "Computed" tab, and then on "Padding" - you will see, that Chrome shows styles wrong. It shows that "padding-right" absorb all width of appeared scroll-bar. But it didn't. It shows that main text field's at the same place where it was. But it moved a little bit left. It acts like Firefox in showing width/height of elements. But Firefox do NOT move main field and the "padding-right" really "eats" the width of scroll-bar.
of-auto.png
11.2 KB View Download

Comment 1 by hdodda@chromium.org, Aug 22 2017

Cc: hdodda@chromium.org
Labels: Needs-Triage-M60 Needs-Feedback
Thanks for reporting the issue. 

@collapse931-- Could you please provide us a sample test case or url in which we can reproduce the issue and please help us with the screencast of the steps for better understanding.

Thanks!

Comment 2 by collapse...@gmail.com, Aug 22 2017 

@hdodda@chromium.org

here is a video, that can explain what I meant. Look closely at blue rectangle highlight of main field and green padding highlighting, and you will see, that they don't move at all. But in fact (and numbers of pixels inform us about it) that main field moved left, and padding moved left, because of appeared scroll-bar.
padding-scrollbar.mp4
3.7 MB View Download
Project Member

Comment 3 by sheriffbot@chromium.org, Aug 22 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 4 by kkaluri@chromium.org, Sep 4 2017

Cc: kkaluri@chromium.org
Components: Platform>DevTools>Authoring
Labels: Needs-Feedback
collapse931@ Thanks for the provided screen-cast. As requested in comment #1 could you help us with html case or same url for further triage.

Thank You...

Comment 5 by collapse...@gmail.com, Sep 6 2017 

@kkaluri@chromium.org

all my simple html and css code you can see at 00:15 of the screencast
what else do you need? I don't get it
you cannot to repro this bug?
Project Member

Comment 6 by sheriffbot@chromium.org, Sep 6 2017

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding requester "kkaluri@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Comment 7 by chenwilliam@chromium.org, Sep 14 2017

Owner: einbinder@chromium.org
Status: Assigned (was: Unconfirmed)
Thanks for the bug report. I can repro this issue - seems like we do have a bug.

@einbinder, can you take a look? I copied their example into a jsfiddle: https://jsfiddle.net/hnppo5ue/
►

Sign in to add a comment