WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 5 months ago

Last modified 5 months 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 months ago.
ie11.png (75.0 KB) - added by poena 5 months 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 months ago

#2 @poena
5 months 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 months ago

#3 @poena
5 months 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 months ago

Screenshot after: Styles are loaded

#4 @poena
5 months ago

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

#5 @poena
5 months ago

  • Keywords has-patch added

#6 @ryelle
5 months 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 months 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 months ago by SergeyBiryukov (previous) (diff)

#8 @t-p
5 months 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 months 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 months ago

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

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

#11 @ryelle
5 months 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 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopened for backporting to the 5.6 branch.

#13 @ryelle
5 months ago

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

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


5 months ago

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


5 months ago

#16 @desrosj
5 months 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
5 months 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.