[wp-trac] [WordPress Trac] #54475: CSS Selector in block-library css will broke SVG scaled text rendering in Chrome 96 (Win 10, Win 11, Mac OS)
WordPress Trac
noreply at wordpress.org
Fri Nov 19 16:31:48 UTC 2021
#54475: CSS Selector in block-library css will broke SVG scaled text rendering in
Chrome 96 (Win 10, Win 11, Mac OS)
--------------------------+-----------------------------
Reporter: dashart | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: General | Version: 5.8.2
Severity: major | Keywords:
Focuses: css |
--------------------------+-----------------------------
**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
2. Scroll to map view
3. 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.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/54475>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list