187176 2018-06-29 05:35:01 -0700 pointer events trigger repaint if use SVG in CSS variable 2018-06-29 16:13:57 -0700 1 1 1 Unclassified WebKit CSS Safari 11 Mac macOS 10.13 NEW InRadar P2 Normal --- 1 asci webkit-unassigned koivisto sabouhallawa simon.fraser webkit-bug-importer zalan oldest_to_newest 1437758 0 343909 asci 2018-06-29 05:35:01 -0700 Created attachment 343909 code from codesandbox example ## Steps to reproduce Basically you need to have SVG image as background Put this image in custom property (CSS variable) Use this CSS variable on some class Use this class on the element Add code to toggle pointer-events on this element Open web inspector and toggle flashes on repaint Toggle pointer events on the element ## What is the expected behavior? no repaints of element ## What went wrong? browser repaints the whole element Here is live example: https://codesandbox.io/s/3r67morj8p 1437960 1 webkit-bug-importer 2018-06-29 16:13:57 -0700 <rdar://problem/41657436> 343909 2018-06-29 05:35:01 -0700 2018-06-29 05:35:01 -0700 code from codesandbox example browser-repaint-issue.zip application/zip 3595 asci UEsDBAoAAAAAADJg3UyrgrBhqwEAAKsBAAAMAAAAcGFja2FnZS5qc29uewogICJuYW1lIjogImJy b3dzZXItcmVwYWludC1pc3N1ZSIsCiAgInZlcnNpb24iOiAiMS4wLjAiLAogICJkZXNjcmlwdGlv biI6ICIiLAogICJrZXl3b3JkcyI6IFtdLAogICJtYWluIjogInNyYy9pbmRleC5qcyIsCiAgImRl cGVuZGVuY2llcyI6IHsKICAgICJyZWFjdCI6ICIxNi4zLjIiLAogICAgInJlYWN0LWRvbSI6ICIx Ni4zLjIiLAogICAgInJlYWN0LXNjcmlwdHMiOiAiMS4xLjQiCiAgfSwKICAiZGV2RGVwZW5kZW5j aWVzIjoge30sCiAgInNjcmlwdHMiOiB7CiAgICAic3RhcnQiOiAicmVhY3Qtc2NyaXB0cyBzdGFy dCIsCiAgICAiYnVpbGQiOiAicmVhY3Qtc2NyaXB0cyBidWlsZCIsCiAgICAidGVzdCI6ICJyZWFj dC1zY3JpcHRzIHRlc3QgLS1lbnY9anNkb20iLAogICAgImVqZWN0IjogInJlYWN0LXNjcmlwdHMg ZWplY3QiCiAgfQp9ClBLAwQKAAAAAAAyYN1MAAAAAAAAAAAAAAAABAAAAHNyYy9QSwMECgAAAAAA MmDdTLjD00ryAgAA8gIAAAwAAABzcmMvaW5kZXguanNpbXBvcnQgUmVhY3QgZnJvbSAicmVhY3Qi OwppbXBvcnQgUmVhY3RET00gZnJvbSAicmVhY3QtZG9tIjsKCmltcG9ydCAiLi9zdHlsZXMuY3Nz IjsKCmNsYXNzIEFwcCBleHRlbmRzIFJlYWN0LkNvbXBvbmVudCB7CiAgY29uc3RydWN0b3IocHJv cHMpIHsKICAgIHN1cGVyKHByb3BzKTsKICAgIHRoaXMuc3RhdGUgPSB7CiAgICAgIHRvZ2dsZTog dHJ1ZQogICAgfTsKICB9CiAgcmVuZGVyKCkgewogICAgcmV0dXJuICgKICAgICAgPGRpdiBjbGFz c05hbWU9IkFwcCI+CiAgICAgICAgPGRpdgogICAgICAgICAgc3R5bGU9e3sgcG9pbnRlckV2ZW50 czogdGhpcy5zdGF0ZS50b2dnbGUgPyAiYXV0byIgOiAibm9uZSIgfX0KICAgICAgICAgIGNsYXNz TmFtZT0idGV4dCIKICAgICAgICA+CiAgICAgICAgdGhpcyBibG9jayBpcyBiZWluZyByZXBhaW50 IGlmIHlvdSB0b2dnbGUgcG9pbnRlciBldmVudHMgb24gaXRzIHN0eWxlCiAgICAgICAgPC9kaXY+ CiAgICAgICAgPGhyIC8+CiAgICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiB0aGlzLnNldFN0 YXRlKHsgdG9nZ2xlOiAhdGhpcy5zdGF0ZS50b2dnbGUgfSl9PgogICAgICAgICAgQ2xpY2sgdG8g dG9nZ2xlIHBvaW50ZXIgZXZlbnRzCiAgICAgICAgPC9idXR0b24+CiAgICAgIDwvZGl2PgogICAg KTsKICB9Cn0KCmNvbnN0IHJvb3RFbGVtZW50ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInJv b3QiKTsKUmVhY3RET00ucmVuZGVyKDxBcHAgLz4sIHJvb3RFbGVtZW50KTsKUEsDBAoAAAAAADJg 3UzrVGgjBAEAAAQBAAAOAAAAc3JjL3N0eWxlcy5jc3M6cm9vdCB7CiAgLS1iZy1pbWFnZTogdXJs KCJkYXRhOmltYWdlL3N2Zyt4bWw7dXRmOCw8c3ZnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8y MDAwL3N2Zycgd2lkdGg9JzEnIGhlaWdodD0nNTYnPjxnPjxwYXRoIGQ9J00gMCAyOCBMIDEgMjgg TCAxIDU2IEwgMCA1NiBaJyBzdHlsZT0nZmlsbDpyZ2IoMjUzLCAyNTMsIDI1MyknPjwvcGF0aD48 L2c+PC9zdmc+Iik7Cn0KCgoudGV4dCB7CiAgYmFja2dyb3VuZC1pbWFnZTogdmFyKC0tYmctaW1h Z2UpOwp9ClBLAwQKAAAAAAAyYN1MAAAAAAAAAAAAAAAABwAAAHB1YmxpYy9QSwMECgAAAAAAMmDd TPQ7pqYIBgAACAYAABEAAABwdWJsaWMvaW5kZXguaHRtbDwhRE9DVFlQRSBodG1sPgo8aHRtbCBs YW5nPSJlbiI+Cgo8aGVhZD4KCTxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KCTxtZXRhIG5hbWU9InZp ZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgc2hy aW5rLXRvLWZpdD1ubyI+Cgk8bWV0YSBuYW1lPSJ0aGVtZS1jb2xvciIgY29udGVudD0iIzAwMDAw MCI+Cgk8IS0tCiAgICAgIG1hbmlmZXN0Lmpzb24gcHJvdmlkZXMgbWV0YWRhdGEgdXNlZCB3aGVu IHlvdXIgd2ViIGFwcCBpcyBhZGRlZCB0byB0aGUKICAgICAgaG9tZXNjcmVlbiBvbiBBbmRyb2lk LiBTZWUgaHR0cHM6Ly9kZXZlbG9wZXJzLmdvb2dsZS5jb20vd2ViL2Z1bmRhbWVudGFscy9lbmdh Z2UtYW5kLXJldGFpbi93ZWItYXBwLW1hbmlmZXN0LwogICAgLS0+Cgk8bGluayByZWw9Im1hbmlm ZXN0IiBocmVmPSIlUFVCTElDX1VSTCUvbWFuaWZlc3QuanNvbiI+Cgk8bGluayByZWw9InNob3J0 Y3V0IGljb24iIGhyZWY9IiVQVUJMSUNfVVJMJS9mYXZpY29uLmljbyI+Cgk8IS0tCiAgICAgIE5v dGljZSB0aGUgdXNlIG9mICVQVUJMSUNfVVJMJSBpbiB0aGUgdGFncyBhYm92ZS4KICAgICAgSXQg d2lsbCBiZSByZXBsYWNlZCB3aXRoIHRoZSBVUkwgb2YgdGhlIGBwdWJsaWNgIGZvbGRlciBkdXJp bmcgdGhlIGJ1aWxkLgogICAgICBPbmx5IGZpbGVzIGluc2lkZSB0aGUgYHB1YmxpY2AgZm9sZGVy IGNhbiBiZSByZWZlcmVuY2VkIGZyb20gdGhlIEhUTUwuCgogICAgICBVbmxpa2UgIi9mYXZpY29u LmljbyIgb3IgImZhdmljb24uaWNvIiwgIiVQVUJMSUNfVVJMJS9mYXZpY29uLmljbyIgd2lsbAog ICAgICB3b3JrIGNvcnJlY3RseSBib3RoIHdpdGggY2xpZW50LXNpZGUgcm91dGluZyBhbmQgYSBu b24tcm9vdCBwdWJsaWMgVVJMLgogICAgICBMZWFybiBob3cgdG8gY29uZmlndXJlIGEgbm9uLXJv b3QgcHVibGljIFVSTCBieSBydW5uaW5nIGBucG0gcnVuIGJ1aWxkYC4KICAgIC0tPgoJPHRpdGxl PlJlYWN0IEFwcDwvdGl0bGU+CjwvaGVhZD4KCjxib2R5PgoJPG5vc2NyaXB0PgoJCVlvdSBuZWVk IHRvIGVuYWJsZSBKYXZhU2NyaXB0IHRvIHJ1biB0aGlzIGFwcC4KCTwvbm9zY3JpcHQ+Cgk8ZGl2 IGlkPSJyb290Ij48L2Rpdj4KCTwhLS0KICAgICAgVGhpcyBIVE1MIGZpbGUgaXMgYSB0ZW1wbGF0 ZS4KICAgICAgSWYgeW91IG9wZW4gaXQgZGlyZWN0bHkgaW4gdGhlIGJyb3dzZXIsIHlvdSB3aWxs IHNlZSBhbiBlbXB0eSBwYWdlLgoKICAgICAgWW91IGNhbiBhZGQgd2ViZm9udHMsIG1ldGEgdGFn cywgb3IgYW5hbHl0aWNzIHRvIHRoaXMgZmlsZS4KICAgICAgVGhlIGJ1aWxkIHN0ZXAgd2lsbCBw bGFjZSB0aGUgYnVuZGxlZCBzY3JpcHRzIGludG8gdGhlIDxib2R5PiB0YWcuCgogICAgICBUbyBi ZWdpbiB0aGUgZGV2ZWxvcG1lbnQsIHJ1biBgbnBtIHN0YXJ0YCBvciBgeWFybiBzdGFydGAuCiAg ICAgIFRvIGNyZWF0ZSBhIHByb2R1Y3Rpb24gYnVuZGxlLCB1c2UgYG5wbSBydW4gYnVpbGRgIG9y IGB5YXJuIGJ1aWxkYC4KICAgIC0tPgo8L2JvZHk+Cgo8L2h0bWw+UEsBAhQACgAAAAAAMmDdTKuC sGGrAQAAqwEAAAwAAAAAAAAAAAAAAAAAAAAAAHBhY2thZ2UuanNvblBLAQIUAAoAAAAAADJg3UwA AAAAAAAAAAAAAAAEAAAAAAAAAAAAEAAAANUBAABzcmMvUEsBAhQACgAAAAAAMmDdTLjD00ryAgAA 8gIAAAwAAAAAAAAAAAAAAAAA9wEAAHNyYy9pbmRleC5qc1BLAQIUAAoAAAAAADJg3UzrVGgjBAEA AAQBAAAOAAAAAAAAAAAAAAAAABMFAABzcmMvc3R5bGVzLmNzc1BLAQIUAAoAAAAAADJg3UwAAAAA AAAAAAAAAAAHAAAAAAAAAAAAEAAAAEMGAABwdWJsaWMvUEsBAhQACgAAAAAAMmDdTPQ7pqYIBgAA CAYAABEAAAAAAAAAAAAAAAAAaAYAAHB1YmxpYy9pbmRleC5odG1sUEsFBgAAAAAGAAYAVgEAAJ8M AAAAAA==