New issue
Advanced search Search tips

Issue 599757 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: May 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Strange layout in writing-mode: vertical-rl

Reported by e.arr...@gmail.com, Apr 1 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

Example URL:
http://nitro-idiot.hatenablog.com

Steps to reproduce the problem:
1. Open http://nitro-idiot.hatenablog.com
2. See the blog title and the posted date.
The blog title is displayed over the date.

What is the expected behavior?
The blog title should be shown at the left of the date.

What went wrong?
The blog title is not shown properly. See the screenshot.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? Yes 

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.87  Channel: n/a
OS Version: OS X 10.11.3
Flash Version: Shockwave Flash 21.0 r0
 
Screen Shot 2016-04-01 at 11.57.14 AM.png
1.6 MB View Download
Screen Shot 2016-04-01 at 11.57.35 AM.png
1.3 MB View Download

Comment 1 by tkent@chromium.org, Apr 1 2016

Components: Blink>Layout>WritingMode
Cc: nyerramilli@chromium.org
Labels: -Type-Compat M-51 hasbisect OS-Windows Type-Bug-Regression
Owner: cbiesin...@chromium.org
Status: Assigned (was: Unconfirmed)
Bisect info:
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/92e3a0f75d28517ff9e8bc47b11666e436762ee5..ddc8320e20e07fc80768beaf1d866808f566574f

Blink CL:
https://chromium.googlesource.com/chromium/blink/+log/8bed182..3daaf1f

suspecting https://chromium.googlesource.com/chromium/blink/+/bf119cdfece210e69c9a99af06f1b9981e2a1bc2

cbiesinger@, Could you please check the above issue & help us in finding an owner it its not yours.

Good Build: 46.0.2486.0
Bad Build: 46.0.2488.0

Able to repro on Win7, Mac OS X 10.11.3 using Chrome Stable 49.0.2623.110, Canary 51.0.2696.0, Dev 51.0.2693.2, Beta 50.0.2661.57
Not able to reproduce on Ubuntu 14.04

Cc: kojii@chromium.org
Apparently this is caused by "position: relative" on the <a href> with class=
"entry-title-link bookmark"

But I actually have no idea why my change would cause that. Koji, any ideas?

Comment 4 by kojii@chromium.org, Apr 5 2016

I can repro on Mac, but not on Win7.

On Mac, the <h1> is layout correctly according to devtools, but paint is offset to the right edge, outside of the box.

So, yeah, doesn't look to be related with the CL, nor any other CLs in the range.

nyerramilli@, could you mind to double-check the bisect?

Comment 5 by kojii@chromium.org, Apr 5 2016

Also it doesn't repro on my non-retina Mac Pro. So far I can repro only on Retina MacBook Pro.

Comment 6 by kojii@chromium.org, Apr 6 2016

Labels: Needs-TestConfirmation
Able to reproduce the issue only on Retina MacBook Pro 10.10.5 using 49.0.2623.87, latest stable 49.0.2623.110, canary 51.0.2700.0.

Unable to reproduce the issue on Windows 7, Ubuntu 14.04.

kojii@Could you please look into this issue.
in reply to c#4, tried again and got the same bisect info 
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/92e3a0f75d28517ff9e8bc47b11666e436762ee5..ddc8320e20e07fc80768beaf1d866808f566574f

Able to repro on Win 7 (64bit Enterprise OS, SP1, Dell Precision M3800) and Lenovo thinkpad X1 carbon, intel 4000 HD graphics card, using Chrome 51.0.7000.0, Beta 50.0.2661.57 and able to repro on Macbook Retina OS X 10.11.4

Note: not able to repro on Mac Non retina

attached gpu info, please check and let me know if you need any more information.
gpu.html
520 KB View Download

Comment 9 by kojii@chromium.org, Apr 6 2016

Cc: cbiesin...@chromium.org
Labels: -Needs-TestConfirmation
Owner: chrishtr@chromium.org
chrishtr@, this looks like high-dpi only paint issue to me, and bisect doesn't indicate any. Happen to have any idea who can best dig into further?
The link underneath the <h1 class="entry-title"> element has position:relative.
On a high-DPI screen, or with --enable-prefer-compositing-to-lcd-text, it
ends up in a composited layer. position:relative is relevant because that gives
it a PaintLayer, which makes it a candidate for compositing.

Turning off layer squashing fixes this bug.

If the bisect is correct, then it seems one of these Blink changes caused the breakage:

https://chromium.googlesource.com/chromium/blink/+/066bcf058246363cafe3ba1370285739cd33a650
https://chromium.googlesource.com/chromium/blink/+/bf119cdfece210e69c9a99af06f1b9981e2a1bc2

Labels: -hasbisect Needs-Bisect
Neither of those is the cause.

I think the bisect didn't find the root cause. I suspect it started reproducing with this bisect on Windows due
to https://codereview.chromium.org/1293083003.

Testers, please bisect again, either on a Retina Mac, or on Linux/Windows with an additional commandline flag: --enable-prefer-compositing-to-lcd-text
Labels: -Needs-Bisect
As suggested in c#11, tried bisect again on Mac OS X 10.11.4(Retina) and below is the bisect info -

Changelog URL:
https://chromium.googlesource.com/chromium/src/+log/d30736b9346ba70b50eaeb9131dc30a322d3435b..0293fec1551d400a09ef72daccacb8825d21b036

Blink CL:
https://chromium.googlesource.com/chromium/blink/+log/f365870054b6b630c73466973b49cee6c430f69d..919ae64532e69647b868fcf5e3a5772b70536990

suspecting, https://chromium.googlesource.com/chromium/blink/+/2fa76f28308db571033479e1fe0185d7bfd86a51

Good Build : 37.0.2030.0
Bad Build : 37.0.2032.0

Note:
as mentioned not able to reproduce the issue on Ubuntu 14.04 (Chrome Stable 50.0.2661.94, Beta 51.0.2704.29, Dev 52.0.2716.0 and 52.0.2721.0

removing bisect label, please let me know if any more information is required.

Now the bisect points at turning on layer squashing:

https://chromium.googlesource.com/chromium/blink/+/2fa76f28308db571033479e1fe0185d7bfd86a51
Reduced testcase:

<!DOCTYPE html>
<div style="-webkit-writing-mode: vertical-rl; width: 400px; height: 400px; overflow-x: auto;">
  <div  style="position: relative">
    Some text
    <div>
      <a style="position: relative;">This text overlaps the other text</a>
    </div>
  </div>
  <div style="width: 10000px; height:200px; background: yellow"></div>
</div>
Status: Fixed (was: Assigned)
Project Member

Comment 17 by bugdroid1@chromium.org, May 9 2016

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/1dc67f4f022c1354fcd9d3223ed61bd6141c7919

commit 1dc67f4f022c1354fcd9d3223ed61bd6141c7919
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Mon May 09 22:05:08 2016

Auto-rebaseline for r392407

https://chromium.googlesource.com/chromium/src/+/ddc6af1c8

BUG= 599757 
TBR=chrishtr@chromium.org

Review URL: https://codereview.chromium.org/1960313003 .

Cr-Commit-Position: refs/heads/master@{#392435}

[modify] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/TestExpectations
[rename] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/linux/compositing/squashing/vertical-writing-mode-squashed-expected.png
[rename] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/linux/compositing/squashing/vertical-writing-mode-squashed-expected.txt
[add] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/mac/compositing/squashing/vertical-writing-mode-squashed-expected.png
[add] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/mac/compositing/squashing/vertical-writing-mode-squashed-expected.txt
[add] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/win/compositing/squashing/vertical-writing-mode-squashed-expected.png
[add] https://crrev.com/1dc67f4f022c1354fcd9d3223ed61bd6141c7919/third_party/WebKit/LayoutTests/platform/win/compositing/squashing/vertical-writing-mode-squashed-expected.txt

Sign in to add a comment