Skip to content

/ servo

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

DuckDuckGo hamburger menu icon stays white after being clicked #19122

Open
atouchet opened this issue Nov 5, 2017 · 10 comments
Open

DuckDuckGo hamburger menu icon stays white after being clicked #19122

atouchet opened this issue Nov 5, 2017 · 10 comments
Labels
C-has-manual-testcase

Comments

@atouchet
Copy link
Contributor

@atouchet atouchet commented Nov 5, 2017 •
edited

URL: https://duckduckgo.com/

When clicking the hamburger menu icon in the top right corner of the page it turns white and stays white afterwards. It is supposed to change back to grey after being clicked.

DuckDuckGo hamburger

Tested in Windows 10 with Browser.html.
@paulrouget paulrouget mentioned this issue Nov 5, 2017
Open
16 of 24 tasks complete
@olmanz
Copy link
Contributor

@olmanz olmanz commented Nov 7, 2017

Hello,

I am new to Rust but I want to participate in Servo. I was able to reproduce this problem on my VirtualMachine using Ubuntu. This looks like it could be a relatively easy issue for Rust beginners like me. Maybe you could assign this issue to me?
@jdm
Copy link
Member

@jdm jdm commented Nov 7, 2017

In general issues related to layout are not as easy as they might appear, but you're welcome to try it!
@jdm
Copy link
Member

@jdm jdm commented Nov 7, 2017

https://github.com/servo/servo/wiki/Getting-started-with-layout may help.
@olmanz
Copy link
Contributor

@olmanz olmanz commented Nov 9, 2017

Here is a reduced test case:

<!DOCTYPE html>
<html class="js no-touch opacity csstransforms3d csstransitions svg cssfilters is-not-mobile-device full-urls" lang="de_DE">
    <head>
        <link rel="stylesheet" href="DuckDuckGo-Dateien/s1479.css" type="text/css">
        <title>DuckDuckGo</title>
    </head>
    <body id="pg-index" class="page-index body--home body--onboarding">
        <div class="site-wrapper  site-wrapper--home  js-site-wrapper">
            <div class="header-wrap--home  js-header-wrap">
                <div class="header--aside">
                    <a class="header__button--menu  js-side-menu-open" href="#">⇶</a>
                </div>
            </div>
        </div>
    </body>
</html>

The problem still occurs when I open this with Servo. However, it does not occur when it is debugged with the -i option.
@jdm
Copy link
Member

@jdm jdm commented Nov 9, 2017

There are a couple ways to further reduce that testcase:

  • include only the relevant style rules in an inline style block, rather than using an external stylesheet
  • remove the classes/elements that do not affect the testcase
@olmanz
Copy link
Contributor

@olmanz olmanz commented Nov 11, 2017

Hello,

I tried to make the testcase as minimal as possible and this is my result:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .header__button--menu {
                transition:background-color .1s,color .1s;
            }

            .header__button--menu:active {
                transition:none .3s ease-in-out 0s;
                color:white;
            }
        </style>
        <title>DuckDuckGo</title>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <a class="header__button--menu" href="#">⇶</a>
                </div>
            </div>
        </div>
    </body>
</html>

As I said in my previous comment, the problem does not occur when I debug it with the -i option.
@olmanz
Copy link
Contributor

@olmanz olmanz commented Nov 13, 2017

@atouchet @jdm
https://github.com/servo/servo/wiki/Getting-started-with-layout does say that I should look for the handle_reflow function in layout_task.rs. That file doesn't seem to exist, but there's a handle_reflow function in components/layout_thread/lib.rs.

The article does also say that I should enable the node.dump() call near the start of the function - how do I do this?
@jdm
Copy link
Member

@jdm jdm commented Nov 13, 2017

@olmanz That may have been replaced by https://dxr.mozilla.org/servo/source/components/layout_thread/lib.rs?q=path%3Alayout_thread%2Flib.rs&redirect_type=single#1123 which can be observed with RUST_LOG=layout_thread
@olmanz
Copy link
Contributor

@olmanz olmanz commented Dec 4, 2017

@atouchet @jdm
Meanwhile, here are my debug results for this issue. First, I had run it without the -i option (where the hamburger icon stays white after it has been clicked). Then, I ran it with the -i option to enforce non-incremental layout, where the problem does not occur. You can see the debug output on my console below. First you see the flow tree before the icon has been clicked, then after it has been clicked, and both of this two times (with and without incremental layout).
So far I cannot see any meaningful differences (and I compared the outputs with a diff tool). I just see that without the -i option, it tells me DEBUG:layout_thread: Draining restyles: 1 and with the -i option it's DEBUG:layout_thread: Draining restyles: 0.
Anyway, it seems that the problem is in the incremental layout.

Opening the page with RUST_LOG=layout_thread ./mach run -Z dump-flow-tree:

DEBUG:layout_thread: layout: received layout request for: file:///home/olmanz/Downloads/DuckDuckGo.html
DEBUG:layout_thread: Number of objects in DOM: 10
DEBUG:layout_thread: layout: parallel? false
DEBUG:layout_thread: layout: processing reflow request for: <html> (0x7f401b61d130) (file:///home/olmanz/Downloads/DuckDuckGo.html) (query=Full)
TRACE:layout_thread: DOM Subtree:
  <html> (0x7f401b61d130)
    <head> (0x7f401b61d160)
      <text node> (0x7f401b61d190)
      <style> (0x7f401b61d1c0)
        <text node> (0x7f401b61d220)
      <text node> (0x7f401b61d280)
      <title> (0x7f401b61d2b0)
        <text node> (0x7f401b61d2e0)
      <text node> (0x7f401b61d310)
    <text node> (0x7f401b61d340)
    <body> (0x7f401b61d370)
      <text node> (0x7f401b61d3a0)
      <div> (0x7f401b61d3d0)
        <text node> (0x7f401b61d400)
        <div> (0x7f401b61d430)
          <text node> (0x7f401b61d460)
          <div> (0x7f401b61d490)
            <text node> (0x7f401b61d4c0)
            <a> (0x7f401b61d4f0)
              <text node> (0x7f401b61d580)
            <text node> (0x7f401b61d5b0)
          <text node> (0x7f401b61d5e0)
        <text node> (0x7f401b61d610)
      <text node> (0x7f401b61d640)
DEBUG:layout_thread: Draining restyles: 6
DEBUG:layout_thread: Noting restyle for <html> (0x7f401b61d130): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c240 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d3d0): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <a> (0x7f401b61d4f0): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c830 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: (empty) }
DEBUG:layout_thread: Noting restyle for <body> (0x7f401b61d370): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c380 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d490): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d430): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Layout done!
┌ Post layout flow tree
│  ├─ Block(7f4029721f10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1024px×740px at (0px,0px)), paint: TypedRect(1024px×740px at (0px,0px)) } children=1 damage=REFLOW_OUT_OF_FLOW | REFLOW
│  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(13) [] border_box=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px)) damage=REPOSITION | STORE_OVERFLOW | REFLOW_OUT_OF_FLOW | REFLOW
│  │  ├─ Block(7f4029721c90) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b18.633333333333333px, @ (i0px,b8px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (8px,0px)), paint: TypedRect(1008px×18.633333333333333px at (8px,0px)) } children=1
│  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(10) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)) margin=LogicalMargin(H LTR, i:8px..8px b:8px..8px) damage=REPOSITION | STORE_OVERFLOW
│  │  │  ├─ Block(7f4029721a10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(7) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)) damage=REPOSITION | STORE_OVERFLOW
│  │  │  │  ├─ Block(7f4029721790) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(4) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)) damage=REPOSITION | STORE_OVERFLOW
│  │  │  │  │  ├─ Block(7f40296dab10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(1) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)) damage=REPOSITION | STORE_OVERFLOW
│  │  │  │  │  │  ├─ Inline(7f4029713390) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)), paint: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)) }
│  │  │  │  │  │  │  └─ SpecificFragmentInfo::ScannedText(0) ["⇶"] border_box=LogicalRect(H LTR, i12px×b18.616666666666667px, @ (i0px,b0.016666666666666666px)) damage=REPOSITION | STORE_OVERFLOW

After clicking the icon:

DEBUG:layout_thread: layout: received layout request for: file:///home/olmanz/Downloads/DuckDuckGo.html
DEBUG:layout_thread: Number of objects in DOM: 10
DEBUG:layout_thread: layout: parallel? false
DEBUG:layout_thread: layout: processing reflow request for: <html> (0x7f401b61d130) (file:///home/olmanz/Downloads/DuckDuckGo.html) (query=Full)
TRACE:layout_thread: DOM Subtree:
  <html> (0x7f401b61d130)
    <head> (0x7f401b61d160)
      <text node> (0x7f401b61d190)
      <style> (0x7f401b61d1c0)
        <text node> (0x7f401b61d220)
      <text node> (0x7f401b61d280)
      <title> (0x7f401b61d2b0)
        <text node> (0x7f401b61d2e0)
      <text node> (0x7f401b61d310)
    <text node> (0x7f401b61d340)
    <body> (0x7f401b61d370)
      <text node> (0x7f401b61d3a0)
      <div> (0x7f401b61d3d0)
        <text node> (0x7f401b61d400)
        <div> (0x7f401b61d430)
          <text node> (0x7f401b61d460)
          <div> (0x7f401b61d490)
            <text node> (0x7f401b61d4c0)
            <a> (0x7f401b61d4f0)
              <text node> (0x7f401b61d580)
            <text node> (0x7f401b61d5b0)
          <text node> (0x7f401b61d5e0)
        <text node> (0x7f401b61d610)
      <text node> (0x7f401b61d640)
DEBUG:layout_thread: Draining restyles: 6
DEBUG:layout_thread: Noting restyle for <html> (0x7f401b61d130): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c240 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d3d0): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <a> (0x7f401b61d4f0): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c830 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: WAS_RESTYLED }
DEBUG:layout_thread: Noting restyle for <body> (0x7f401b61d370): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c380 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d490): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Noting restyle for <div> (0x7f401b61d430): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f402965c470 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Layout done!
┌ Post layout flow tree
│  ├─ Block(7f4029723310) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1024px×740px at (0px,0px)), paint: TypedRect(1024px×740px at (0px,0px)) } children=1 damage=REFLOW_OUT_OF_FLOW | REFLOW
│  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(28) [] border_box=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px))
│  │  ├─ Block(7f4029723090) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b18.633333333333333px, @ (i0px,b8px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (8px,0px)), paint: TypedRect(1008px×18.633333333333333px at (8px,0px)) } children=1
│  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(25) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)) margin=LogicalMargin(H LTR, i:8px..8px b:8px..8px)
│  │  │  ├─ Block(7f4029722e10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(22) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  ├─ Block(7f4029722b90) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(19) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  ├─ Block(7f4029722910) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1
│  │  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(16) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  │  ├─ Inline(7f4029713710) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)), paint: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)) }
│  │  │  │  │  │  │  └─ SpecificFragmentInfo::ScannedText(15) ["⇶"] border_box=LogicalRect(H LTR, i12px×b18.616666666666667px, @ (i0px,b0.016666666666666666px)) damage=REPOSITION | STORE_OVERFLOW

Opening the page with RUST_LOG=layout_thread ./mach run -Z dump-flow-tree -i ~/Downloads/DuckDuckGo.html:

DEBUG:layout_thread: layout: received layout request for: file:///home/olmanz/Downloads/DuckDuckGo.html
DEBUG:layout_thread: Number of objects in DOM: 10
DEBUG:layout_thread: layout: parallel? false
DEBUG:layout_thread: layout: processing reflow request for: <html> (0x7f50c301d130) (file:///home/olmanz/Downloads/DuckDuckGo.html) (query=Full)
TRACE:layout_thread: DOM Subtree:
  <html> (0x7f50c301d130)
    <head> (0x7f50c301d160)
      <text node> (0x7f50c301d190)
      <style> (0x7f50c301d1c0)
        <text node> (0x7f50c301d220)
      <text node> (0x7f50c301d280)
      <title> (0x7f50c301d2b0)
        <text node> (0x7f50c301d2e0)
      <text node> (0x7f50c301d310)
    <text node> (0x7f50c301d340)
    <body> (0x7f50c301d370)
      <text node> (0x7f50c301d3a0)
      <div> (0x7f50c301d3d0)
        <text node> (0x7f50c301d400)
        <div> (0x7f50c301d430)
          <text node> (0x7f50c301d460)
          <div> (0x7f50c301d490)
            <text node> (0x7f50c301d4c0)
            <a> (0x7f50c301d4f0)
              <text node> (0x7f50c301d580)
            <text node> (0x7f50c301d5b0)
          <text node> (0x7f50c301d5e0)
        <text node> (0x7f50c301d610)
      <text node> (0x7f50c301d640)
DEBUG:layout_thread: Draining restyles: 1
DEBUG:layout_thread: Noting restyle for <html> (0x7f50c301d130): ElementData { styles: ElementStyles { primary: Some(Some(StrongRuleNode { p: 0x7f50d045c240 })), pseudos: EagerPseudoStyles(None) }, damage: (empty), hint: (empty), flags: TRAVERSED_WITHOUT_STYLING }
DEBUG:layout_thread: Done building display list.
DEBUG:layout_thread: Layout done!
┌ Post layout flow tree
│  ├─ Block(7f50d04da890) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1024px×740px at (0px,0px)), paint: TypedRect(1024px×740px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES | REFLOW_OUT_OF_FLOW | REFLOW
│  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(43) [] border_box=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px))
│  │  ├─ Block(7f50d0522190) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b18.633333333333333px, @ (i0px,b8px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (8px,0px)), paint: TypedRect(1008px×18.633333333333333px at (8px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(40) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)) margin=LogicalMargin(H LTR, i:8px..8px b:8px..8px)
│  │  │  ├─ Block(7f50d04dab10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(37) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  ├─ Block(7f50d0521790) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(34) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  ├─ Block(7f50d0521a10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(31) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  │  ├─ Inline(7f50d0513550) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)), paint: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)) } damage=BUBBLE_ISIZES
│  │  │  │  │  │  │  └─ SpecificFragmentInfo::ScannedText(30) ["⇶"] border_box=LogicalRect(H LTR, i12px×b18.616666666666667px, @ (i0px,b0.016666666666666666px)) damage=REPOSITION | STORE_OVERFLOW

After clicking the icon:

DEBUG:layout_thread: layout: received layout request for: file:///home/olmanz/Downloads/DuckDuckGo.html
DEBUG:layout_thread: Number of objects in DOM: 10
DEBUG:layout_thread: layout: parallel? false
DEBUG:layout_thread: layout: processing reflow request for: <html> (0x7f50c301d130) (file:///home/olmanz/Downloads/DuckDuckGo.html) (query=Full)
TRACE:layout_thread: DOM Subtree:
  <html> (0x7f50c301d130)
    <head> (0x7f50c301d160)
      <text node> (0x7f50c301d190)
      <style> (0x7f50c301d1c0)
        <text node> (0x7f50c301d220)
      <text node> (0x7f50c301d280)
      <title> (0x7f50c301d2b0)
        <text node> (0x7f50c301d2e0)
      <text node> (0x7f50c301d310)
    <text node> (0x7f50c301d340)
    <body> (0x7f50c301d370)
      <text node> (0x7f50c301d3a0)
      <div> (0x7f50c301d3d0)
        <text node> (0x7f50c301d400)
        <div> (0x7f50c301d430)
          <text node> (0x7f50c301d460)
          <div> (0x7f50c301d490)
            <text node> (0x7f50c301d4c0)
            <a> (0x7f50c301d4f0)
              <text node> (0x7f50c301d580)
            <text node> (0x7f50c301d5b0)
          <text node> (0x7f50c301d5e0)
        <text node> (0x7f50c301d610)
      <text node> (0x7f50c301d640)
DEBUG:layout_thread: Draining restyles: 0
DEBUG:layout_thread: Done building display list.
DEBUG:layout_thread: Layout done!
┌ Post layout flow tree
│  ├─ Block(7f50d04d8f90) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1024px×740px at (0px,0px)), paint: TypedRect(1024px×740px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES | REFLOW_OUT_OF_FLOW | REFLOW
│  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(133) [] border_box=LogicalRect(H LTR, i1024px×b740px, @ (i0px,b0px))
│  │  ├─ Block(7f50d04d9e90) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1024px×b18.633333333333333px, @ (i0px,b8px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (8px,0px)), paint: TypedRect(1008px×18.633333333333333px at (8px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(130) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)) margin=LogicalMargin(H LTR, i:8px..8px b:8px..8px)
│  │  │  ├─ Block(7f50d0521790) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i8px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(127) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  ├─ Block(7f50d04dab10) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(124) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  ├─ Block(7f50d04da610) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(1008px×18.633333333333333px at (0px,0px)), paint: TypedRect(1008px×18.633333333333333px at (0px,0px)) } children=1 damage=BUBBLE_ISIZES
│  │  │  │  │  │  ├─ ↑↑ Fragment for block: SpecificFragmentInfo::Generic(121) [] border_box=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px))
│  │  │  │  │  │  ├─ Inline(7f50d0513710) sc=StackingContextId(0) pos=LogicalRect(H LTR, i1008px×b18.633333333333333px, @ (i0px,b0px)),  floatspec-in=L 0px R 0px, floatspec-out=L 0px R 0px, overflow=Overflow { scroll: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)), paint: TypedRect(12px×18.616666666666667px at (0px,0.016666666666666666px)) } damage=BUBBLE_ISIZES
│  │  │  │  │  │  │  └─ SpecificFragmentInfo::ScannedText(120) ["⇶"] border_box=LogicalRect(H LTR, i12px×b18.616666666666667px, @ (i0px,b0.016666666666666666px)) damage=REPOSITION | STORE_OVERFLOW
@atouchet
Copy link
Contributor Author

@atouchet atouchet commented Dec 7, 2017

It might also be worth mentioning that this bug does not always reproduce 100% of the time.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
C-has-manual-testcase
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
@jdm @olmanz @atouchet
You can’t perform that action at this time.