128248 2014-02-05 07:39:10 -0800 Large SVG sprite does not display (small does) with CSS background-position 2022-07-15 16:49:55 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) iPhone / iPad All RESOLVED CONFIGURATION CHANGED P2 Critical --- 1 contact webkit-unassigned bfulgham zimmermann oldest_to_newest 976732 0 223233 contact 2014-02-05 07:39:10 -0800 Created attachment 223233 basic HTML page If an HTML element is assigned an SVG background-image in CSS, it does not render if the vector graphic sprite is too 'large'. Is this because the UA is rendering out a large image and before painting to screen, ignoring the defined size in the CSS (e.g. background-size: 749px 27px;)? For example, if an SVG has its width and height attributes set thus: width="15520" height="560", then iOS is unable to render the background image. However, if exactly the same vector data is saved out into an SVG sprite with smaller (albeit still unit-less) dimensions iOS is able to render it. A test page is attached, view it on an iOS device to witness the problem (or rather not witness it because nothing appears). View the file in the desktop and the image it shown. 976733 1 223234 contact 2014-02-05 07:40:46 -0800 Created attachment 223234 This is the SVG sprite that needs saving alongside the HTML for testing Ensure this SVG sprite is saved alongside the original attachment to test the issue. 1884419 2 bfulgham 2022-07-15 16:49:55 -0700 Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue. 223233 2014-02-05 07:39:10 -0800 2014-02-05 07:39:10 -0800 basic HTML page index.html text/html 2840 contact PCFkb2N0eXBlIGh0bWw+CjxodG1sIGNsYXNzPSJuby1qcyIgbGFuZz0iZW4iPgo8aGVhZD4KPG1l dGEgY2hhcnNldD0idXRmLTgiPgogIDx0aXRsZT5pT1MgU3ByaXRlIFRlc3Q8L3RpdGxlPgogIDxt ZXRhIG5hbWU9ImRlc2NyaXB0aW9uIiBjb250ZW50PSJpT1MgZG9lcyBub3QgZGlzcGxheSBTVkcg c3ByaXRlcyBjb3JyZWN0bHkiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0 aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wIj4KCTxzdHlsZT4KCQkubWFpbiB7CgkJ CW92ZXJmbG93LXk6IGhpZGRlbjsKCQkJb3ZlcmZsb3cteDogc2Nyb2xsOwoJCQktd2Via2l0LW92 ZXJmbG93LXNjcm9sbGluZzogdG91Y2g7CgkJCXdoaXRlLXNwYWNlOiBub3dyYXA7CgkJCXBhZGRp bmctdG9wOiA4cHg7CgkJfQoJCVtjbGFzcyo9ImNhdCJdIHsKCQkJZGlzcGxheTogaW5saW5lLWJs b2NrOwoJCQlwYWRkaW5nLXRvcDogMjZweDsKCQkJcGFkZGluZy1ib3R0b206IDRweDsKCQkJd2lk dGg6IDUwcHg7CgkJCWhlaWdodDogNDhweDsKCQkJYmFja2dyb3VuZC1yZXBlYXQ6IG5vLXJlcGVh dDsKCQkJdGV4dC1hbGlnbjogY2VudGVyOwoJCQl3aGl0ZS1zcGFjZTogbm93cmFwOwoJCX0KCQku Y2F0LTEtc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3Vu ZC1wb3NpdGlvbjogLTBweCAwOwoJCX0KCgkJLmNhdC0xMC1zdGQgewoJCQl3aWR0aDogNDdweDsK CQkJaGVpZ2h0OiAyN3B4OwoJCQliYWNrZ3JvdW5kLXBvc2l0aW9uOiAtNDdweCAwOwoJCX0KCgkJ LmNhdC0xMS1zdGQgewoJCQl3aWR0aDogNDdweDsKCQkJaGVpZ2h0OiAyN3B4OwoJCQliYWNrZ3Jv dW5kLXBvc2l0aW9uOiAtOTRweCAwOwoJCX0KCgkJLmNhdC0xMi1zdGQgewoJCQl3aWR0aDogNDdw eDsKCQkJaGVpZ2h0OiAyN3B4OwoJCQliYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMTQxcHggMDsKCQl9 CgoJCS5jYXQtMTMtc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFj a2dyb3VuZC1wb3NpdGlvbjogLTE4OHB4IDA7CgkJfQoKCQkuY2F0LTE0LXN0ZCB7CgkJCXdpZHRo OiA0N3B4OwoJCQloZWlnaHQ6IDI3cHg7CgkJCWJhY2tncm91bmQtcG9zaXRpb246IC0yMzRweCAw OwoJCX0KCgkJLmNhdC0xNS1zdGQgewoJCQl3aWR0aDogNDdweDsKCQkJaGVpZ2h0OiAyN3B4OwoJ CQliYWNrZ3JvdW5kLXBvc2l0aW9uOiAtMjgxcHggMDsKCQl9CgoJCS5jYXQtMTYtc3RkIHsKCQkJ d2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjogLTMy OHB4IDA7CgkJfQoKCQkuY2F0LTItc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdw eDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjogLTM3NXB4IDA7CgkJfQoKCQkuY2F0LTMtc3RkIHsK CQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjog LTQyMXB4IDA7CgkJfQoKCQkuY2F0LTQtc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDog MjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjogLTQ2OHB4IDA7CgkJfQoKCQkuY2F0LTUtc3Rk IHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlv bjogLTUxNXB4IDA7CgkJfQoKCQkuY2F0LTYtc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdo dDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjogLTU2MnB4IDA7CgkJfQoKCQkuY2F0LTct c3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3Np dGlvbjogLTYwOHB4IDA7CgkJfQoKCQkuY2F0LTgtc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhl aWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1wb3NpdGlvbjogLTY1NXB4IDA7CgkJfQoKCQkuY2F0 LTktc3RkIHsKCQkJd2lkdGg6IDQ3cHg7CgkJCWhlaWdodDogMjdweDsKCQkJYmFja2dyb3VuZC1w b3NpdGlvbjogLTcwMnB4IDA7CgkJfQoKCQkuY2F0LTEtc3RkLAoJCS5jYXQtMTAtc3RkLAoJCS5j YXQtMTEtc3RkLAoJCS5jYXQtMTItc3RkLAoJCS5jYXQtMTMtc3RkLAoJCS5jYXQtMTQtc3RkLAoJ CS5jYXQtMTUtc3RkLAoJCS5jYXQtMTYtc3RkLAoJCS5jYXQtMi1zdGQsCgkJLmNhdC0zLXN0ZCwK CQkuY2F0LTQtc3RkLAoJCS5jYXQtNS1zdGQsCgkJLmNhdC02LXN0ZCwKCQkuY2F0LTctc3RkLAoJ CS5jYXQtOC1zdGQsCgkJLmNhdC05LXN0ZCB7CgkJCWJhY2tncm91bmQtaW1hZ2U6IHVybChzcHJp dGUuc3ZnKTsKCQkJYmFja2dyb3VuZC1zaXplOiA3NDlweCAyN3B4OwoJCX0KCTwvc3R5bGU+Cjwv aGVhZD4KPGJvZHk+CiAgCiAgPGRpdiBjbGFzcz0ibWFpbiI+Cgk8YiBjbGFzcz0iY2F0LTEtc3Rk Ij48L2I+Cgk8YiBjbGFzcz0iY2F0LTItc3RkIj48L2I+Cgk8YiBjbGFzcz0iY2F0LTMtc3RkIj48 L2I+Cgk8YiBjbGFzcz0iY2F0LTQtc3RkIj48L2I+Cgk8YiBjbGFzcz0iY2F0LTUtc3RkIj48L2I+ Cgk8YiBjbGFzcz0iY2F0LTYtc3RkIj48L2I+Cgk8YiBjbGFzcz0iY2F0LTctc3RkIj48L2I+Cgk8 YiBjbGFzcz0iY2F0LTgtc3RkIj48L2I+Cgk8YiBjbGFzcz0iY2F0LTktc3RkIj48L2I+Cgk8YiBj bGFzcz0iY2F0LTEwLXN0ZCI+PC9iPgoJPGIgY2xhc3M9ImNhdC0xMS1zdGQiPjwvYj4KCTxiIGNs YXNzPSJjYXQtMTItc3RkIj48L2I+Cgk8YiBjbGFzcz0iY2F0LTEzLXN0ZCI+PC9iPgoJPGIgY2xh c3M9ImNhdC0xNC1zdGQiPjwvYj4KCTxiIGNsYXNzPSJjYXQtMTUtc3RkIj48L2I+Cgk8YiBjbGFz cz0iY2F0LTE2LXN0ZCI+PC9iPgogIDwvZGl2PgogIAo8L2JvZHk+CjwvaHRtbD4= 223234 2014-02-05 07:40:46 -0800 2014-02-05 07:40:46 -0800 This is the SVG sprite that needs saving alongside the HTML for testing sprite.svg image/svg+xml 3642 contact PHN2ZyBiYXNlUHJvZmlsZT0idGlueSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3Zn IiB3aWR0aD0iMTU1MjAiIGhlaWdodD0iNTYwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWF4WU1h eCBtZWV0IiB2aWV3Qm94PSIwIDAgMTU1MjAgNTYwIiA+PHBhdGggc3Ryb2tlPSIjMzMzIiBmaWxs PSIjRkZERjFCIiBkPSJNNDgwIDQ0OGwtMTY0LjU4IDg2LjUyNSAzMS40MzItMTgzLjI2Mi0xMzMu MTQ4LTEyOS43ODcgMTg0LjAwNi0yNi43MzggODIuMjktMTY2LjczOCA4Mi4yOSAxNjYuNzM4IDE4 NC4wMDYgMjYuNzM4LTEzMy4xNDggMTI5Ljc4NyAzMS40MzIgMTgzLjI2MnoiLz48ZyB0cmFuc2Zv cm09InRyYW5zbGF0ZSg5NzApIj48cGF0aCBzdHJva2U9IiMzMzMiIGZpbGw9IiNGRkRGMUIiIGQ9 Ik00ODAgNDQ4bC0xNjQuNTggODYuNTI1IDMxLjQzMi0xODMuMjYyLTEzMy4xNDgtMTI5Ljc4NyAx ODQuMDA2LTI2LjczOCA4Mi4yOS0xNjYuNzM4IDgyLjI5IDE2Ni43MzggMTg0LjAwNiAyNi43Mzgt MTMzLjE0OCAxMjkuNzg3IDMxLjQzMiAxODMuMjYyeiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5z bGF0ZSgxOTQwKSI+PHBhdGggc3Ryb2tlPSIjMzMzIiBmaWxsPSIjRkZERjFCIiBkPSJNNDgwIDQ0 OGwtMTY0LjU4IDg2LjUyNSAzMS40MzItMTgzLjI2Mi0xMzMuMTQ4LTEyOS43ODcgMTg0LjAwNi0y Ni43MzggODIuMjktMTY2LjczOCA4Mi4yOSAxNjYuNzM4IDE4NC4wMDYgMjYuNzM4LTEzMy4xNDgg MTI5Ljc4NyAzMS40MzIgMTgzLjI2MnoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkx MCkiPjxwYXRoIHN0cm9rZT0iIzMzMyIgZmlsbD0iI0ZGREYxQiIgZD0iTTQ4MCA0NDhsLTE2NC41 OCA4Ni41MjUgMzEuNDMyLTE4My4yNjItMTMzLjE0OC0xMjkuNzg3IDE4NC4wMDYtMjYuNzM4IDgy LjI5LTE2Ni43MzggODIuMjkgMTY2LjczOCAxODQuMDA2IDI2LjczOC0xMzMuMTQ4IDEyOS43ODcg MzEuNDMyIDE4My4yNjJ6Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM4ODApIj48cGF0 aCBzdHJva2U9IiMzMzMiIGZpbGw9IiNGRkRGMUIiIGQ9Ik00ODAgNDQ4bC0xNjQuNTggODYuNTI1 IDMxLjQzMi0xODMuMjYyLTEzMy4xNDgtMTI5Ljc4NyAxODQuMDA2LTI2LjczOCA4Mi4yOS0xNjYu NzM4IDgyLjI5IDE2Ni43MzggMTg0LjAwNiAyNi43MzgtMTMzLjE0OCAxMjkuNzg3IDMxLjQzMiAx ODMuMjYyeiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0ODUwKSI+PHBhdGggc3Ryb2tl PSIjMzMzIiBmaWxsPSIjRkZERjFCIiBkPSJNNDgwIDQ0OGwtMTY0LjU4IDg2LjUyNSAzMS40MzIt MTgzLjI2Mi0xMzMuMTQ4LTEyOS43ODcgMTg0LjAwNi0yNi43MzggODIuMjktMTY2LjczOCA4Mi4y OSAxNjYuNzM4IDE4NC4wMDYgMjYuNzM4LTEzMy4xNDggMTI5Ljc4NyAzMS40MzIgMTgzLjI2Mnoi Lz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgyMCkiPjxwYXRoIHN0cm9rZT0iIzMzMyIg ZmlsbD0iI0ZGREYxQiIgZD0iTTQ4MCA0NDhsLTE2NC41OCA4Ni41MjUgMzEuNDMyLTE4My4yNjIt MTMzLjE0OC0xMjkuNzg3IDE4NC4wMDYtMjYuNzM4IDgyLjI5LTE2Ni43MzggODIuMjkgMTY2Ljcz OCAxODQuMDA2IDI2LjczOC0xMzMuMTQ4IDEyOS43ODcgMzEuNDMyIDE4My4yNjJ6Ii8+PC9nPjxn IHRyYW5zZm9ybT0idHJhbnNsYXRlKDY3OTApIj48cGF0aCBzdHJva2U9IiMzMzMiIGZpbGw9IiNG RkRGMUIiIGQ9Ik00ODAgNDQ4bC0xNjQuNTggODYuNTI1IDMxLjQzMi0xODMuMjYyLTEzMy4xNDgt MTI5Ljc4NyAxODQuMDA2LTI2LjczOCA4Mi4yOS0xNjYuNzM4IDgyLjI5IDE2Ni43MzggMTg0LjAw NiAyNi43MzgtMTMzLjE0OCAxMjkuNzg3IDMxLjQzMiAxODMuMjYyeiIvPjwvZz48ZyB0cmFuc2Zv cm09InRyYW5zbGF0ZSg3NzYwKSI+PHBhdGggc3Ryb2tlPSIjMzMzIiBmaWxsPSIjRkZERjFCIiBk PSJNNDgwIDQ0OGwtMTY0LjU4IDg2LjUyNSAzMS40MzItMTgzLjI2Mi0xMzMuMTQ4LTEyOS43ODcg MTg0LjAwNi0yNi43MzggODIuMjktMTY2LjczOCA4Mi4yOSAxNjYuNzM4IDE4NC4wMDYgMjYuNzM4 LTEzMy4xNDggMTI5Ljc4NyAzMS40MzIgMTgzLjI2MnoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFu c2xhdGUoODczMCkiPjxwYXRoIHN0cm9rZT0iIzMzMyIgZmlsbD0iI0ZGREYxQiIgZD0iTTQ4MCA0 NDhsLTE2NC41OCA4Ni41MjUgMzEuNDMyLTE4My4yNjItMTMzLjE0OC0xMjkuNzg3IDE4NC4wMDYt MjYuNzM4IDgyLjI5LTE2Ni43MzggODIuMjkgMTY2LjczOCAxODQuMDA2IDI2LjczOC0xMzMuMTQ4 IDEyOS43ODcgMzEuNDMyIDE4My4yNjJ6Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk3 MDApIj48cGF0aCBzdHJva2U9IiMzMzMiIGZpbGw9IiNGRkRGMUIiIGQ9Ik00ODAgNDQ4bC0xNjQu NTggODYuNTI1IDMxLjQzMi0xODMuMjYyLTEzMy4xNDgtMTI5Ljc4NyAxODQuMDA2LTI2LjczOCA4 Mi4yOS0xNjYuNzM4IDgyLjI5IDE2Ni43MzggMTg0LjAwNiAyNi43MzgtMTMzLjE0OCAxMjkuNzg3 IDMxLjQzMiAxODMuMjYyeiIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMDY3MCkiPjxw YXRoIHN0cm9rZT0iIzMzMyIgZmlsbD0iI0ZGREYxQiIgZD0iTTQ4MCA0NDhsLTE2NC41OCA4Ni41 MjUgMzEuNDMyLTE4My4yNjItMTMzLjE0OC0xMjkuNzg3IDE4NC4wMDYtMjYuNzM4IDgyLjI5LTE2 Ni43MzggODIuMjkgMTY2LjczOCAxODQuMDA2IDI2LjczOC0xMzMuMTQ4IDEyOS43ODcgMzEuNDMy IDE4My4yNjJ6Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExNjQwKSI+PHBhdGggc3Ry b2tlPSIjMzMzIiBmaWxsPSIjRkZERjFCIiBkPSJNNDgwIDQ0OGwtMTY0LjU4IDg2LjUyNSAzMS40 MzItMTgzLjI2Mi0xMzMuMTQ4LTEyOS43ODcgMTg0LjAwNi0yNi43MzggODIuMjktMTY2LjczOCA4 Mi4yOSAxNjYuNzM4IDE4NC4wMDYgMjYuNzM4LTEzMy4xNDggMTI5Ljc4NyAzMS40MzIgMTgzLjI2 MnoiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI2MTApIj48cGF0aCBzdHJva2U9IiMz MzMiIGZpbGw9IiNGRkRGMUIiIGQ9Ik00ODAgNDQ4bC0xNjQuNTggODYuNTI1IDMxLjQzMi0xODMu MjYyLTEzMy4xNDgtMTI5Ljc4NyAxODQuMDA2LTI2LjczOCA4Mi4yOS0xNjYuNzM4IDgyLjI5IDE2 Ni43MzggMTg0LjAwNiAyNi43MzgtMTMzLjE0OCAxMjkuNzg3IDMxLjQzMiAxODMuMjYyeiIvPjwv Zz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMzU4MCkiPjxwYXRoIHN0cm9rZT0iIzMzMyIgZmls bD0iI0ZGREYxQiIgZD0iTTQ4MCA0NDhsLTE2NC41OCA4Ni41MjUgMzEuNDMyLTE4My4yNjItMTMz LjE0OC0xMjkuNzg3IDE4NC4wMDYtMjYuNzM4IDgyLjI5LTE2Ni43MzggODIuMjkgMTY2LjczOCAx ODQuMDA2IDI2LjczOC0xMzMuMTQ4IDEyOS43ODcgMzEuNDMyIDE4My4yNjJ6Ii8+PC9nPjxnIHRy YW5zZm9ybT0idHJhbnNsYXRlKDE0NTUwKSI+PHBhdGggc3Ryb2tlPSIjMzMzIiBmaWxsPSIjRkZE RjFCIiBkPSJNNDgwIDQ0OGwtMTY0LjU4IDg2LjUyNSAzMS40MzItMTgzLjI2Mi0xMzMuMTQ4LTEy OS43ODcgMTg0LjAwNi0yNi43MzggODIuMjktMTY2LjczOCA4Mi4yOSAxNjYuNzM4IDE4NC4wMDYg MjYuNzM4LTEzMy4xNDggMTI5Ljc4NyAzMS40MzIgMTgzLjI2MnoiLz48L2c+PC9zdmc+