WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#52040 closed defect (bug) (fixed)

Twenty Twenty-One: WordPress (5.6) site displays without style in MS IE-11

Reported by: t-p Owned by: ryelle
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: commit, fixed-major, twenty-twenty-one-1.1
Focuses: css Cc:

Description

No style displayed in MS IE-11.

However, no such problem in FF, Chrome, Edge

I have tried in both (1) twenty twenty-one and (2) a Child theme of twenty twenty-one.

Attachments (2)

52040.patch (295.0 KB) - added by poena 5 weeks ago.
ie11.png (75.0 KB) - added by poena 5 weeks ago.
Screenshot after: Styles are loaded

Download all attachments as: .zip

Change History (19)

This ticket was mentioned in Slack in #forums by t-p. View the logs.


5 weeks ago

#2 @poena
5 weeks ago

Hi!
Thank you for reporting this.

You are right, the two stylesheets used for IE11 does not include the correct styles:
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css
https://core.trac.wordpress.org/browser/trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

Twenty Twenty-One uses SCSS and CSS variables that IE11 can not read.

One of the configuration files that is used to create styles for IE11 is missing, namely https://github.com/WordPress/twentytwentyone/blob/trunk/postcss.config.js.

This file needs to be added back and new files for Internet Explorer needs to be created.

@poena
5 weeks ago

#3 @poena
5 weeks ago

In these two updated CSS files you should be able to see that the CSS variables have been replaced.
The styles are not going to be identical to other browsers, but I will attach a screenshot from IE11.

@poena
5 weeks ago

Screenshot after: Styles are loaded

#4 @poena
5 weeks ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 5.6.1
  • Version set to 5.6

#5 @poena
5 weeks ago

  • Keywords has-patch added

#6 @ryelle
5 weeks ago

Patch is good. Just noting that the build:ie* commands should have errored with no PostCSS config, but it doesn't actually fail the build process so it's easy to miss.

Also, I noticed that the version in 01-settings/file-header.scss is still 1.0.0, so it makes changes in the other .css files — it should be 1.0. Doesn't seem worth opening another ticket for, does it? I think that could be done here too…?

#7 @poena
5 weeks ago

There is another ticket for the versioning, but the patch there would need to be remade after this either way. #51958

Last edited 5 weeks ago by SergeyBiryukov (previous) (diff)

#8 @t-p
5 weeks ago

Instead of waiting for 5.6.1, is there some place from where I can download these missing components? or, best yet may be to update just the theme to 1.1

#9 @poena
5 weeks ago

@t-p You can download and apply the patch file that is attached to the ticket.

But if you are unable to update the browser, or if you rely on visitors that are using IE11, perhaps consider another theme, it is not built primarily for IE11.

#10 @poena
5 weeks ago

The version in file-header.scss is fixed here: #52044

Last edited 5 weeks ago by SergeyBiryukov (previous) (diff)

#11 @ryelle
5 weeks ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 49800:

Twenty Twenty-One: Bring back PostCSS config.

Twenty Twenty-One uses PostCSS to convert the custom properties for Internet Explorer. Without a config file, the postcss command does nothing, causing issues in IE. This brings back the config from GitHub, which replaces all custom properties with the default values.

Props t-p, poena.
Fixes #52040.

#12 @ryelle
5 weeks ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopened for backporting to the 5.6 branch.

#13 @ryelle
5 weeks ago

  • Keywords commit fixed-major added; has-patch removed

This ticket was mentioned in Slack in #hosting-community by mike. View the logs.


4 weeks ago

This ticket was mentioned in Slack in #core by lukecarbis. View the logs.


4 weeks ago

#16 @desrosj
4 weeks ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 49824:

Twenty Twenty-One: Bring back PostCSS config.

Twenty Twenty-One uses PostCSS to convert the custom properties for Internet Explorer. Without a config file, the postcss command does nothing, causing issues in IE. This brings back the config from GitHub, which replaces all custom properties with the default values.

Props t-p, poena, ryelle.
Merges [49800] to the 5.6 branch.
Fixes #52040.

#17 @desrosj
4 weeks ago

  • Keywords twenty-twenty-one-1.1 added

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.

Note: See TracTickets for help on using tickets.