Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#52040 closed defect (bug) (fixed)

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

Reported by: t-p's profile t-p Owned by: ryelle's profile 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 3 years ago.
ie11.png (75.0 KB) - added by poena 3 years 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.


3 years ago

#2 @poena
3 years 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
3 years ago

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

Screenshot after: Styles are loaded

#4 @poena
3 years ago

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

#5 @poena
3 years ago

  • Keywords has-patch added

#6 @ryelle
3 years 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
3 years ago

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

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

#8 @t-p
3 years 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
3 years 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
3 years ago

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

Last edited 3 years ago by SergeyBiryukov (previous) (diff)

#11 @ryelle
3 years 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
3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopened for backporting to the 5.6 branch.

#13 @ryelle
3 years ago

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

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


3 years ago

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


3 years ago

#16 @desrosj
3 years 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
3 years 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.