1327475 - Some text nodes disappear, another become blurred if I use highlighter in inspector (presumably anonymous content causes changes in layout

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open https://rg.ru/2016/08/30/glava-mid-frg-oproverg-zaiavlenie-belogo-doma.html?ref=ria.ru
2. Open devtools -> inspector
  (make sure that the page is scrolled to the top and Facebook sharing button is visible)
3. Find element #mCSB_1 in markup, hover mouse over that element in markup

AR:  Highlight on the page appears. And also several things happen:
 1) Text near Facebook button (representing the number of users who shared the article) disappears
 2) The title of the article (and some other text on the page) changes in a specific subpixel manner:
    Vertical borders of letters become blurred. Some borders that already were blurred, become
    non-blurred. In some text nodes (e.g. date, selector ".b-material-head__date-day")
    some letters move to the left by 0.5px, other letters move to the right by 0.5px.

ER:  Text shouldn't disappear. Text shouldn't flicker and become blurred


Notes:
1) In STR_1 you're need to open url in a maximized window on the screen 1280x1024. I also have DPI
   set to 125%, and DPI in Firefox (layout.css.devPixelsPerPx) set to 1.0. The only meaning of this is
   that vertical scrollbar is 21px in width. Therefore the real width of the page is 1259, i.e. odd
   Considering that, you may need to open that site in a window with width equal to 1259 + width of
   scrollbar (use window.open() API). Alternatively, you can try responsive design mode (Ctrl+SHift+M)
2) STR_1 assumes that element #mCSB_1 and disappearing text labels are visible on at the same time.

Comment 1

[Patrick Brosset <:pbro>]

I reproduced the disappearing text (1) on windows 10 64 bits with Firefox Nightly 53 (build of 2017-01-03).
I could not reproduce the glitch on the article title (2) though, but that might because I was testing on a 4K monitor.

From what I can see, as soon as the #mCSB_1 element gets highlighted, the facebook button (and the other buttons below it) acts as if it had overflow:hidden applied to it. Indeed, if you change the position of the text with CSS so it overlaps the button, and then highlight #mCSB_1, you'll see the piece of text that overlaps the button, while the piece that's outside of it will be hidden.

Comment 2

[Ciprian Muresan [:cmuresan], Ecosystem QA]

User Agent 	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID 	20170129110302

I have also managed to partially reproduce the issue on the latest Firefox release (51.0.1) and on the latest Nightly (54.0a1). I'm only managed to reproduce the disappearing text.

Patrick, do you know which component would be suitable for this issue?

Comment 3

[Patrick Brosset <:pbro>]

Tried today on Mac and could not reproduce.
Triaged as a P3 (filter on CLIMBING SHOES).