WebKit Bugzilla
Attachment 372776 Details for
Bug 199168
: An SVG element inside a position: absolute element won't update until a layout change
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
test.html
test.html (text/html), 1.38 KB, created by
Tim Guan-tin Chien [:timdream]
on 2019-06-24 11:35:30 PDT
(
hide
)
Description:
test.html
Filename:
MIME Type:
Creator:
Tim Guan-tin Chien [:timdream]
Created:
2019-06-24 11:35:30 PDT
Size:
1.38 KB
patch
obsolete
><style> > >body { > text-align: center; >} > >.inner { > position: relative; > z-index: 2; > width: 190px; > height: 190px; > background: #66f; >} > >svg { > margin: 20px; > position: absolute; > width: 150px; > height: 150px; > fill: #333; >} > ></style> > ><p>#1 Absolute positioned div with svg inside</p> > ><div class="inner"> > <svg id="first" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> ></div> > ><p>#2 Absolute positioned div with svg inside, set the svg to display: block with inline style and remove it in a setTimeout</p> > ><div class="inner"> > <svg id="second" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> ></div> > ><p>#3 Same as #1 but with transform: translateZ(0)</p> > ><div class="inner" style="transform: translateZ(0)"> > <svg id="third" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> ></div> > ><p>#4 Same as #2 but with transform: translateZ(0)</p> > ><div class="inner" style="transform: translateZ(0)"> > <svg id="forth" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> ></div> > ><script> >window.onload = () => setTimeout(() => { >console.log("43"); > document.getElementById("second").style.display = ""; > document.getElementById("forth").style.display = ""; >}, 100); ></script>
<style> body { text-align: center; } .inner { position: relative; z-index: 2; width: 190px; height: 190px; background: #66f; } svg { margin: 20px; position: absolute; width: 150px; height: 150px; fill: #333; } </style> <p>#1 Absolute positioned div with svg inside</p> <div class="inner"> <svg id="first" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> </div> <p>#2 Absolute positioned div with svg inside, set the svg to display: block with inline style and remove it in a setTimeout</p> <div class="inner"> <svg id="second" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> </div> <p>#3 Same as #1 but with transform: translateZ(0)</p> <div class="inner" style="transform: translateZ(0)"> <svg id="third" viewBox="0 0 150 150" focusable="false"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> </div> <p>#4 Same as #2 but with transform: translateZ(0)</p> <div class="inner" style="transform: translateZ(0)"> <svg id="forth" viewBox="0 0 150 150" focusable="false" style="display: block"><g><path d="M 10,150 L 70,10 L 130,150 z"/></g></svg> </div> <script> window.onload = () => setTimeout(() => { console.log("43"); document.getElementById("second").style.display = ""; document.getElementById("forth").style.display = ""; }, 100); </script>
View Attachment As Raw
Actions:
View
Attachments on
bug 199168
: 372776