[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]

#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:  Editor        |     Version:  5.8.2
 Severity:  major         |  Resolution:
 Keywords:                |     Focuses:  css
--------------------------+------------------------------
Changes (by SergeyBiryukov):

 * component:  General => Editor


Old description:

> **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.

New description:

 **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#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform