Skip to content
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

Fix print styles for Internet Explorer 11 #1799

Merged
merged 1 commit into from
Aug 17, 2016

Conversation

damianwajer
Copy link
Contributor

*:first-line pseudo-selector freezes window with print preview in IE 11 (tested on Windows 7 with IE 11.0.9600.17420 and 11.0.9600.18204, Windows 8.1 with IE 11.0.9600.16663, Windows 10 with IE 11.63.10586.0)

To reproduce just open: http://demo.html5boilerplate.com/ or /dist/index.html and select Print > Print preview...

@slavanga
Copy link
Contributor

slavanga commented Mar 6, 2016

The freeze is caused by the star selector. Scoping the :first-line and :first-letter selectors to paragraphs seems to be a good compromise.

*,
*:before,
*:after,
p:first-line,
p:first-letter {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

@damianwajer
Copy link
Contributor Author

@slavanga Good point. From what I've tested it seems that only *:first-line causes this bug so maybe just p:first-line?

*,
*:before,
*:after,
*:first-letter,
p:first-line {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
                               http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
}

Any other opinions?

@slavanga slavanga mentioned this pull request Apr 22, 2016
@paulirish
Copy link
Member

Can someone look up the history of why those first-* lines are in here? Rather unexpected, IMO.

@slavanga
Copy link
Contributor

slavanga commented Aug 8, 2016

I found the original pull request: #1715

@roblarsen
Copy link
Member

Thanks @slavanga

I was able to reproduce this . Annoying issue. It works in Edge.

@damianwajer I think expanding from just p:first-child to include maybe div, blockquote and li would cover a good majority of the intent behind the universal selector. Want to (months alter, sorry!) alter the PR to include those other common elements?

@damianwajer
Copy link
Contributor Author

@roblarsen

I think expanding from just p:first-child to include maybe div, blockquote and li (...)

Did you mean p:first-line?

*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {}

Like this? It works in IE 11.

@roblarsen
Copy link
Member

@damianwajer Yeah, that's it. I don't want to add a hundred elements there as it's just a print style and the point of the PR is to fix the freeze. I think those elements are going to cover a majority of the places where people use a :first-line

*:first-line pseudo-selector freezes window with print preview in IE 11
(tested on Windows 7 with IE 11.0.9600.17420 and 11.0.9600.18204,
Windows 8.1 with IE 11.0.9600.16663, Windows 10 with IE 11.63.10586.0)

To reproduce just open: http://demo.html5boilerplate.com/
or /dist/index.html and select Print > Print preview...
@damianwajer
Copy link
Contributor Author

@roblarsen I see, done.

@roblarsen roblarsen merged commit 9c98cfa into h5bp:master Aug 17, 2016
@roblarsen
Copy link
Member

Thanks!

patrickhlauke added a commit to twbs/bootstrap that referenced this pull request Jul 11, 2017
Bootstrap itself doesn't use any `::first-letter` or `::first-line`
styles. These selectors also cause(d) problems in IE11 (see
h5bp/html5-boilerplate#1799) and currently cause
a nasty rendering bug in Chrome where the first letter is vertically
shifted (see #21771)

As h5bp has now removed these as well, no need to keep and comment them
out. See h5bp/html5-boilerplate#1961 /
h5bp/html5-boilerplate#1962
jeffreznik pushed a commit to jeffreznik/sw-test that referenced this pull request Oct 15, 2017
*:first-line pseudo-selector freezes window with print preview in IE 11
(tested on Windows 7 with IE 11.0.9600.17420 and 11.0.9600.18204,
Windows 8.1 with IE 11.0.9600.16663, Windows 10 with IE 11.63.10586.0)

To reproduce just open: http://demo.html5boilerplate.com/
or /dist/index.html and select Print > Print preview...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants