Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#54475 new defect (bug)

CSS Selector in block-library css will broke SVG scaled text rendering in Chrome 96 (Win 10, Win 11, Mac OS)

Reported by: dashart Owned by:
Milestone: Awaiting Review Priority: normal
Severity: major Version: 5.8.2
Component: Editor Keywords:
Focuses: css Cc:

Description (last modified by SergeyBiryukov)

Issue:
We detected wrong rendered SVG Text elements in Google Chrome 96. Our svg map solution is embedded in a wordpress based website of our client.
We detected moving "shop numbers" in our map solution, if the map is embedded in the wordpress website.
As soon as the user changes the zoom of the map the shop numbers will be rendered out of sync with the other svg parts.

We tracked the issue down to the following css file:
wp-includes/css/dist/block-library/style.min.css

The selectors used in the blocks

.wp-block-table table[style*=border-style]>*,
.wp-block-table table[style*=border-style] td,
.wp-block-table table[style*=border-style] th,
.wp-block-table table[style*=border-style] tr {
  border-style: auto
}

.wp-block-table table[style*=border-width]>*,
.wp-block-table table[style*=border-width] td,
.wp-block-table table[style*=border-width] th,
.wp-block-table table[style*=border-width] tr {
  border-width: auto
}

will cause the issue.

Reduced to the exact selectors:

.wp-block-table table[style*=border-style]>*,

and

.wp-block-table table[style*=border-width]>*,

or simplified:

*[style*=x]>* {}

We were also able to reproduce the issue in our test system:

Map without the critical selector:
https://db-ek-preview.d-ssl.de/preview/station_bonn.html

Map with the critical selector (style selector used in header):
https://db-ek-preview.d-ssl.de/preview/station_bonn_broken_chrome.html

Steps to reproduce:

  1. Open website:

https://www.einkaufsbahnhof.de/dresden-neustadt/lageplan
or
https://db-ek-preview.d-ssl.de/preview/station_bonn_broken_chrome.html

  1. Scroll to map view
  2. Zoom in or out by mouse wheel / drag gesture / controls

Current behavior:
numbers within the circles in to of the shopping areas will be drawn outside of the circle

Expected behavior:
shop numbers drawn in sync with white circles

Note
Window resize by 1px or more will trigger svg area render updates, which will fix the issue until next zoom action.

Test result:
Affected systems

  • Win 11 - Google Chrome 96
  • Win 10 - Google Chrome 96
  • Mac OS 12 - Google Chrome 96

Not affected systems

  • Mac OS 12 - Safari 15.1
  • Mac OS 12 - Mozilla Firefox
  • Win 10 - Google Chrome 95
  • Mac OS 11 - Google Chrome 95
  • Win 10 - Edge 95 Beta
  • Win 10 - Edge 94
  • Android 11 (Pixel 5) - Google Chrome
  • Android 11 (Huawei P30 Pro) - Google Chrome
  • iOS 15.1 (iPad Pro 10,5) - Safari

I know the bug is a Google Chrome Browser issue in v96 and I will report the issue to Google Chrome team too.
But I report this issue to WordPress core team too, to trigger a workaround for WordPress, because I think the Google Chrome team will not prioritize this issue.

Change History (2)

#1 @SergeyBiryukov
2 months ago

  • Component changed from General to Editor
  • Description modified (diff)
Note: See TracTickets for help on using tickets.