-
Notifications
You must be signed in to change notification settings - Fork 514
Background SVG animation breaks generation #646
Open
Description
Hello.
Test machine:
CentOS @ Linux 2.6.32-042stab123.2; nginx; PHP 7.2.10 with Xdebug v2.6.1
Custom formatter:
$formatter = new lessc_formatter_compressed; $formatter->close = "}\n"; $less = new lessc(); $less->setFormatter($formatter); $content = $less->compileFile('test.less');
Problem:
Breaks formatting after processing background SVG with animation.
Source:
.p-discount{ .samples{ &.ajax_loader{ background: transparent url("data:image/svg+xml,%3Csvg class='lds-equalizer' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='background: none;'%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect y='0' height='71.7228' fill='%23fcb711' x='6.111111111111111' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.625s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='37.5557' fill='%23f37021' x='17.22222222222222' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.25s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='45.9452' fill='%23cc004c' x='28.333333333333336' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.875s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='55.6027' fill='%236460aa' x='39.44444444444444' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.5s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='74.1008' fill='%230089d0' x='50.55555555555556' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.75s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='49.9617' fill='%230db14b' x='61.66666666666667' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.375s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='13.2263' fill='%23fcb711' x='72.77777777777777' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.125s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='12.2389' fill='%23f37021' x='83.88888888888889' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='0s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0; background-size: 64px; color: #fff; text-indent: -9999px; min-height: 64px; & > *{ visibility: hidden !important; } } .level{ width: 100px; } .price{ text-align: right; width: 1px; white-space: nowrap; &.error{ background-color: fade(red, 25%); } } .diff{ color: #777; } } } // ====================================== // Список заказов // ====================================== .orders_list{ .icon{ background: transparent none no-repeat center center; display: inline-block; text-indent: -9999px; height: 14px; width: 14px; &.cart{ background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCiA8cGF0aCBmaWxsPSJub25lIiBkPSJtLTQtMi40MWgyNHYyNGgtMjR6Ii8+DQogPHBhdGggZmlsbD0iIzM5OGVlOSIgZD0ibTExLjggNS45MS0zLjE3LTQuNzdjLTAuMTQtMC4yMDItMC4zNy0wLjMwNC0wLjYtMC4zMDQtMC4yMzMgMC0wLjQ2NSAwLjEwMi0wLjYwNCAwLjMxM2wtMy4xOSA0Ljc2aC0zLjQ4Yy0wLjQgMC0wLjcyNyAwLjMyNy0wLjcyNyAwLjcyNyAwIDAuMDY1NSAwLjAwNzI3IDAuMTMxIDAuMDI5MSAwLjE5NmwxLjg1IDYuNzRjMC4xNjcgMC42MTEgMC43MjcgMS4wNiAxLjQgMS4wNmg5LjQ1YzAuNjY5IDAgMS4yMy0wLjQ1MSAxLjQtMS4wNmwxLjg1LTYuNzQgMC4wMjE4LTAuMTk2YzAtMC40LTAuMzI3LTAuNzI3LTAuNzI3LTAuNzI3aC0zLjQ4em0tNS45NyAwIDIuMTgtMy4yIDIuMTggMy4yaC00LjM2em0yLjE4IDUuODJjLTAuOCAwLTEuNDUtMC42NTUtMS40NS0xLjQ1IDAtMC44IDAuNjU1LTEuNDUgMS40NS0xLjQ1IDAuOCAwIDEuNDUgMC42NTUgMS40NSAxLjQ1IDAgMC44LTAuNjU1IDEuNDUtMS40NSAxLjQ1eiIvPg0KPC9zdmc+DQo=); background-size: 100%; // черно-белый, если менеджер &.manager{ filter: grayscale(1); } } &.manager{ } &.o2b{ background-image: url(/i/icon_o2b.png); background-size: 100%; // черно-белый, если менеджер &.manager{ filter: grayscale(1); } } } }
Result:
.p-discount .samples.ajax_loader{background:transparent url("data:image/svg+xml,%3Csvg class='lds-equalizer' width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='background: none;'%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect y='0' height='71.7228' fill='%23fcb711' x='6.111111111111111' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.625s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='37.5557' fill='%23f37021' x='17.22222222222222' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.25s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='45.9452' fill='%23cc004c' x='28.333333333333336' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.875s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='55.6027' fill='%236460aa' x='39.44444444444444' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.5s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='74.1008' fill='%230089d0' x='50.55555555555556' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.75s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='49.9617' fill='%230db14b' x='61.66666666666667' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.375s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='13.2263' fill='%23fcb711' x='72.77777777777777' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='-0.125s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3Crect y='0' height='12.2389' fill='%23f37021' x='83.88888888888889' width='10'%3E%3Canimate attributeName='height' calcMode='spline' values='50;75;10;50' times='0;0.33;0.66;1' keySplines='0.5 0 0.5 1;0.5 0 0.5 1;0.5 0 0.5 1' repeatCount='indefinite' begin='0s' dur='1'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0;background-size:64px;color:#fff;text-indent:-9999px;min-height:64px;} .p-discount .samples.ajax_loader > *{visibility:hidden !important;} .p-discount .samples // уровни .level{width:100px;} .p-discount .samples // цена и разница в цене .price{text-align:right;width:1px;white-space:nowrap;} .p-discount .samples // цена и разница в цене .price.error{background-color:rgba(222,137,137,0.25);} .p-discount .samples .diff{color:#777;} // ====================================== // Список заказов // ====================================== .orders_list .icon{background:transparent none no-repeat center center;display:inline-block;text-indent:-9999px;height:14px;width:14px;} // ====================================== // Список заказов // ====================================== .orders_list .icon.cart{background-image:url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCiA8cGF0aCBmaWxsPSJub25lIiBkPSJtLTQtMi40MWgyNHYyNGgtMjR6Ii8+DQogPHBhdGggZmlsbD0iIzM5OGVlOSIgZD0ibTExLjggNS45MS0zLjE3LTQuNzdjLTAuMTQtMC4yMDItMC4zNy0wLjMwNC0wLjYtMC4zMDQtMC4yMzMgMC0wLjQ2NSAwLjEwMi0wLjYwNCAwLjMxM2wtMy4xOSA0Ljc2aC0zLjQ4Yy0wLjQgMC0wLjcyNyAwLjMyNy0wLjcyNyAwLjcyNyAwIDAuMDY1NSAwLjAwNzI3IDAuMTMxIDAuMDI5MSAwLjE5NmwxLjg1IDYuNzRjMC4xNjcgMC42MTEgMC43MjcgMS4wNiAxLjQgMS4wNmg5LjQ1YzAuNjY5IDAgMS4yMy0wLjQ1MSAxLjQtMS4wNmwxLjg1LTYuNzQgMC4wMjE4LTAuMTk2YzAtMC40LTAuMzI3LTAuNzI3LTAuNzI3LTAuNzI3aC0zLjQ4em0tNS45NyAwIDIuMTgtMy4yIDIuMTggMy4yaC00LjM2em0yLjE4IDUuODJjLTAuOCAwLTEuNDUtMC42NTUtMS40NS0xLjQ1IDAtMC44IDAuNjU1LTEuNDUgMS40NS0xLjQ1IDAuOCAwIDEuNDUgMC42NTUgMS40NSAxLjQ1IDAgMC44LTAuNjU1IDEuNDUtMS40NSAxLjQ1eiIvPg0KPC9zdmc+DQo=);background-size:100%;} // ====================================== // Список заказов // ====================================== .orders_list .icon.cart // черно-белый,если менеджер // ====================================== // Список заказов // ====================================== .orders_list .icon.cart.manager{filter:grayscale(1);} // ====================================== // Список заказов // ====================================== .orders_list .icon.o2b{background-image:url(/i/icon_o2b.png);background-size:100%;} // ====================================== // Список заказов // ====================================== .orders_list .icon.o2b // черно-белый,если менеджер // ====================================== // Список заказов // ====================================== .orders_list .icon.o2b.manager{filter:grayscale(1);}
Metadata
Metadata
Assignees
Labels
No labels