[Webkit-unassigned] [Bug 166962] New: animation-delay has limit in proceeded amount of seconds

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=166962

            Bug ID: 166962
           Summary: animation-delay has limit in proceeded amount of
                    seconds
    Classification: Unclassified
           Product: WebKit
           Version: Safari 10
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: SVG
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: david.bruchmann at gmail.com
                CC: zimmermann at kde.org

if some CSS like this is used:

.circle-hours-r3730 { 
    stroke:rgba(0,0,180,0.6);
    animation: keyframes-hours-r3730 43200s infinite;  /* steps(12)*/
    animation-timing-function: linear;
    animation-delay:-21600s;
}

the animation is only working if the seconds for ANIMATION-DELAY cover round about half a day or less.
The detailed amount of accepted seconds seems not clear for me and changing randomly.
So in general the feature animation-delay is working but useless for larger amount of seconds.
As I don't have safari by my own I rely on customer reports. Before declining (hopefully not) please check all possible versions and frameworks.
The randomly changing accepted amount of seconds I discovered with Midori-browser on ubuntu.

An example SVG is this:

<svg width="200" height="200" class="main-container" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        svg.main-container{
            background:transparent;
        }
    </style>
    <svg class="circle-watch-content" viewBox="0 0 10000 10000" preserveAspectRatio="none">
        <style type="text/css">
            .circle-watch-content .donuts {
                -webkit-transform-origin:5000px 5000px;
                -moz-transform-origin:5000px 5000px;
                transform-origin:5000px 5000px;

                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                transform: rotate(-90deg);
            }
            .circle-watch-content .donuts .donut circle {
                stroke-width:350;
                stroke-dashoffset:0;
                fill:transparent;
            }
            .circle-background { stroke:rgba(256,256,256,0.7); fill:transparent;}
        </style>
        <g class="donuts">
            <svg class="donut donut-r3730">
                <style type="text/css">
                    @keyframes keyframes-hours-r3730 {
                          0%      { stroke-dasharray:0 23437; }
                        100%      { stroke-dasharray:23436.28 23437; }
                    }
                    .circle-hours-r3730 { 
                        stroke:rgba(0,0,180,0.6);
                        animation: keyframes-hours-r3730 43200s infinite;  /* steps(12)*/
                        animation-timing-function: linear;
                        animation-delay:-21600s;
                    }
                </style>
                <circle cx="5000" cy="5000" r="3730" class="circle-background circle-background-r3730"></circle>
                <circle cx="5000" cy="5000" r="3730" class="circle-hours circle-hours-r3730" id="circle-hours-r3730"></circle>
            </svg>
        </g>
    </svg>
</svg>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170112/e1d16113/attachment.html>