Able to reproduce the issue on latest Chrome stable i.e., 57.0.2987.110 on Windows 7/10, Mac and Linux. Also able ro reproduce the issue on Canary(59.0.3044.0) and Beta(58.0.3029.19)


Bisect result :
You are probably looking for a change made after 445591 (known good), but no lat
er than 445592 (first known bad).
CHANGELOG URL:
  https://chromium.googlesource.com/chromium/src/+log/e0e3192612e9cca060b807cf4483353f6c9a2294..43437042d29fc936bb50f73cbe29907135936f47

askatte@, can you check this on Android?

Repros on M57 - 57.0.2987.118 / Pixel XL/ 7.1.1 (on other devices too).

Applying OS=Android per comment #5.

Reproducible on CrOS 9202.54.0/57.0.2987.115 - Candy Device as well.

Thanks for the report, and sorry for the break.

jgoltermann@gmail.com before we launch the fix, can you try a workaround first by adding a rule:

  a {
    opacity: 1;
  }

below the following rule in style.css:
  h1, h2, h3, h4, h5, h6, p, table, ul, li, a {
        opacity: .999;
        font-weight: normal;
        margin: 0;
        padding: 0;
  }

Reduced test case

Deleted: recipe.html 236 bytes

recipe.html 236 bytes View Download

Done; it looks much better, but those captions are not meant to be
intersecting the image.  They should be floating just below the images, but
the left-hand edge of the captions are at roughly the intended location.

Thanks very much for the rapid response and turnaround!  I look forward to
the full bug-fix!

Thanks for trying it. I tried the new version and Firefox also showed the same result, even with "opacity: 1" removed. Are there any other changes?

Gah!  Confirmed, and on Microsoft Edge, and Safari 10.0.3.  (D'oh!)  OK,
I'll take it.  I can at least get the CSS corrected myself.

Thanks very much for this!  You guys rock!

BTW, when can I expect the fix to go out?  Next minor release?

Thanks in advance for any insight you can offer.

Proposed fix: https://codereview.chromium.org/2761413002/

The fix doesn't fix bug 703481, and I'm afraid there are other corner cases that are broken by r445591, so now I'm inclined to revert r445591 and r442046. This will reopen  bug 666553  which had existed before m57.

Add Merge-Request-57 for the reverts.

wangxianzhu@, could you please confirm r445591 and r442046 will be safe reverts merge to M57? And will these reverts fix bug 703481 too?

I need some time to build, test and confirm.

Before that, I would like to evaluate the impact of this bug and bug 703481 first. If the impact is low, we will leave m57 as-is, and provide workaround methods for the sites, and fix the bugs in m58 and m59. The evaluation may need several hours to finish.

Re #18: Ok,sounds good. Please keep us posted.

Correction: all r445591 in the above comments should be r445592 instead.

Approving merge of https://codereview.chromium.org/2761413002/ for M57 branch 2987 and M58 branch 3029.

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

commit be8909e4d0dfe024e1b39f5abf195e63d97652ae
Author: wangxianzhu <wangxianzhu@chromium.org>
Date: Wed Mar 22 20:17:46 2017

Fix position of layer with floating ancestor within inline parent layer

<span style="position: relative">
  ...
    <div style="float: left">
      ...
        <target layer>
      ...
    </div>
  ...
</span>

Because of the floating ancestor, the containing layer of target layer
is not the span, but the layer found in the containing block chain.

BUG= 703666 ,703481

CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2761413002
Cr-Commit-Position: refs/heads/master@{#458857}

[modify] https://crrev.com/be8909e4d0dfe024e1b39f5abf195e63d97652ae/third_party/WebKit/Source/core/layout/compositing/GraphicsLayerUpdater.cpp
[modify] https://crrev.com/be8909e4d0dfe024e1b39f5abf195e63d97652ae/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/be8909e4d0dfe024e1b39f5abf195e63d97652ae/third_party/WebKit/Source/core/paint/PaintLayerTest.cpp

Issue 703481 has been merged into this issue.

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

commit 05de6acd8ec79f95dede0ed751a5be65e8b35c47
Author: wangxianzhu <wangxianzhu@chromium.org>
Date: Wed Mar 22 23:48:59 2017

Fix position of layer with floating ancestor within inline parent layer

<span style="position: relative">
  ...
    <div style="float: left">
      ...
        <target layer>
      ...
    </div>
  ...
</span>

Because of the floating ancestor, the containing layer of target layer
is not the span, but the layer found in the containing block chain.

BUG= 703666 ,703481

CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2
NOPRESUBMIT=true
NOTRY=true
R=chrishtr

Review-Url: https://codereview.chromium.org/2761413002
Cr-Original-Commit-Position: refs/heads/master@{#458857}
Review-Url: https://codereview.chromium.org/2767133003
Cr-Commit-Position: refs/branch-heads/2987@{#865}
Cr-Branched-From: ad51088c0e8776e8dcd963dbe752c4035ba6dab6-refs/heads/master@{#444943}

[modify] https://crrev.com/05de6acd8ec79f95dede0ed751a5be65e8b35c47/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/05de6acd8ec79f95dede0ed751a5be65e8b35c47/third_party/WebKit/Source/core/paint/PaintLayerTest.cpp

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

commit a63a4e804574974a127ee0920f65628374257ebb
Author: wangxianzhu <wangxianzhu@chromium.org>
Date: Wed Mar 22 23:56:24 2017

Fix position of layer with floating ancestor within inline parent layer

<span style="position: relative">
  ...
    <div style="float: left">
      ...
        <target layer>
      ...
    </div>
  ...
</span>

Because of the floating ancestor, the containing layer of target layer
is not the span, but the layer found in the containing block chain.

BUG= 703666 ,703481
NOTRY=true
NOPRESUBMIT=true
TBR=wangxianzhu@chromium.org

CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2

Review-Url: https://codereview.chromium.org/2761413002
Cr-Original-Commit-Position: refs/heads/master@{#458857}
Review-Url: https://codereview.chromium.org/2770713004
Cr-Commit-Position: refs/branch-heads/3029@{#375}
Cr-Branched-From: 939b32ee5ba05c396eef3fd992822fcca9a2e262-refs/heads/master@{#454471}

[modify] https://crrev.com/a63a4e804574974a127ee0920f65628374257ebb/third_party/WebKit/Source/core/layout/compositing/GraphicsLayerUpdater.cpp
[modify] https://crrev.com/a63a4e804574974a127ee0920f65628374257ebb/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] https://crrev.com/a63a4e804574974a127ee0920f65628374257ebb/third_party/WebKit/Source/core/paint/PaintLayerTest.cpp

Will mark this as fixed since the patch has landed across all applicable branches.  Please file a new bug to track any required follow-up (e.g. a reland of the applicable functionality with the regression addressed).

Verified this issue on Ubuntu 14.04, Windows-10 and Mac OS 10.12 using chrome latest stable #57.0.2987.123. By opening the test case file recipe.html from comment #11 observed that the text is placed inside the box as expected. Hence adding TE-Verified label.

Thanks!

Deleted: 703666.png 2.7 KB

	703666.png 2.7 KB View Download

Verified the issue on Chrome 57.0.2987.123/CrOS 9202.56.1 (Peppy) with the testcase recipe.html (comment #11). 

Thank you for fixing the bug. 
Requesting postmortem for this please see go/chrome-postmortems for the process to follow).

schenney@ will you write postmortem for this bug? I have created a blank version (chromepostmortem374), and just changed the owner to you.

Is there a reason this bug was activated again? Can we please close if this is fixed and verified already?

Tested the issue on windows 7,Ubuntu 14.04 and Mac 10.12.3 using chrome version 58.0.3029.41 with the attached html file from comment #11.
Observed the text is inside the box.
Please find the attached screen shot for the same.

Ading TE-Verified labels.

Thanks,

Deleted: 703666.png 48.7 KB

	703666.png 48.7 KB View Download

Android: Issue is verified in M58- 58.0.3029.42 on Samsung Galaxy TAB 3 10.1 (GT-P5210) KOT49H