Closed Bug 1209802 Opened 9 years ago Closed 6 years ago

<input autofocus> causes styles to be computed before style sheets are loaded, triggering bogus CSS transitions when they do load

Categories

(Core :: Layout: Form Controls, defect)

Product:
Core
Component:
Layout: Form Controls
Version:
41 Branch
Platform:
x86_64
Windows
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 712130

People

(Reporter: hammurabi, Unassigned)

References

Details

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:41.0) Gecko/20100101 Firefox/41.0
Build ID: 20150917150946

Steps to reproduce:

I am using Simple Sidebar for Bootstrap 3 (http://startbootstrap.com/template-overviews/simple-sidebar/). Its stylesheet uses media queries to hide and show the sidebar depending on the viewport. Upon loading the page, if it contains a form with autofocus set, Firefox displays it as it was just resized.

Steps to reproduce:
1. Create an HTML file with this content:
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <link href="bug.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <div class="wrapper" id="wrapper">
    <div id="page-content-wrapper">
      <form>
        <input autofocus="autofocus" type="text">
      </form>
    </div>
  </div>
  </body>
  </html>
2. Create a CSS file with this content:
  #wrapper{
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }
  @media (min-width: 768px){
    #wrapper{
      padding-left: 250px;
    }
  }



Actual results:

The input element moves from the left corner to its final position, 250px. (Any other style animation is noticeable, eg background-color.)



Expected results:

The input element should be placed 250px from the left corner from the very beginning. This works correctly if styles are included inline into the HTML file.
Component: Untriaged → Layout
Product: Firefox → Core
OS: Unspecified → Windows
Hardware: Unspecified → x86_64
I didn't test the testcases (would be easier if they were attached to the bug), but based on the description it sounds like something in the implementation of autofocus is causing a layout flush early in the loading process -- probably while we're still paint-suppressed and loading the style sheet.  I think the solution would be that it shouldn't do that.

(Given your statement that the bug requires that the style sheet be in an external stylesheet rather than within the document, I suspect the media queries are unrelated, but I haven't tested to confirm this.)
Blocks: 546995
Component: Layout → Layout: Form Controls
Summary: CSS media queries not working properly when using autofocus → <input autofocus> causes styles to be computed before style sheets are loaded, triggering bogus CSS transitions when they do load
For the record, the layout flush autofocus triggers has this stack:

#4  0x00000001033e31ef in nsDocument::FlushPendingNotifications (this=0x1291aec00, aType=Flush_Layout) at nsDocument.cpp:8206
#5  0x0000000103401bac in nsFocusManager::CheckIfFocusable (this=0x100640df0, aContent=0x11f83f000, aFlags=0) at nsFocusManager.cpp:1527
#6  0x00000001034002b2 in nsFocusManager::SetFocusInner (this=0x100640df0, aNewContent=0x11f83f000, aFlags=0, aFocusChanged=true, aAdjustWidget=true) at nsFocusManager.cpp:1160
#7  0x0000000103401862 in nsFocusManager::SetFocus (this=0x100640df0, aElement=0x11f83f080, aFlags=0) at nsFocusManager.cpp:464
#8  0x0000000104911404 in nsGenericHTMLElement::Focus (this=0x11f83f000, aError=@0x7fff5fbfc850) at nsGenericHTMLElement.cpp:2644
#9  0x00000001048499ae in mozilla::dom::HTMLInputElement::Focus (this=0x11f83f000, aError=@0x7fff5fbfc850) at HTMLInputElement.cpp:2887
#10 0x000000010493ea52 in nsAutoFocusEvent::Run (this=0x11aa4b9c0) at nsGenericHTMLElement.cpp:154
Fixed by https://hg.mozilla.org/integration/autoland/pushloghtml?changeset=302d513bcb40.

I verified that the latest Nightly build (https://archive.mozilla.org/pub/firefox/nightly/2018/02/2018-02-15-22-05-07-mozilla-central/) yields the expected results for the steps reported by hammurabi. Note for reproducing: the CSS has to be delayed by a network request.
Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.