141731 2015-02-17 15:58:13 -0800 The origin of SVG clip-path is not calculated correctly when it is applied outside the SVG 2023-05-27 06:02:11 -0700 1 1 1 Unclassified WebKit SVG 528+ (Nightly build) Unspecified Unspecified NEW InRadar P2 Normal --- 126207 1 sabouhallawa webkit-unassigned ahmad.saleem792 dino karlcow simon.fraser webkit-bug-importer zimmermann oldest_to_newest 1069971 0 246774 sabouhallawa 2015-02-17 15:58:13 -0800 Created attachment 246774 Test case Open the attached test case. It has four inline <div> tags. Inside each tag, there is a nested <div> which is clipped using an SVG <clipPath>. The same <clipPath> is applied to an item in the SVG itself. Results: When applying the clipPath outside the SVG, the clipping is only applied on the first <div> and its origin is not correct. It shifted to the top and the left of the <div>. Also it is applied for the first time only. From the second time, the clip-path clips the whole element, i.e. nothing is displayed from it. When the transform: translateZ(0); is added to the style of the nested <div>, no clipping is applied, i.e.the whole element is rendered. 1069972 1 246775 sabouhallawa 2015-02-17 15:59:15 -0800 Created attachment 246775 Test case -- Add translateZ(0) 1069973 2 webkit-bug-importer 2015-02-17 16:00:46 -0800 <rdar://problem/19868009> 1927326 3 ahmad.saleem792 2023-01-22 14:05:37 -0800 @Said - is this reproducible for you? For me, it seems Safari 16.2, STP161 are matching with Chrome Canary 111 and Firefox Nightly 111. Can you help me on how to reproduce this bug? Thanks! 246774 2015-02-17 15:58:13 -0800 2015-02-17 15:58:13 -0800 Test case test061.html text/html 1000 sabouhallawa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+CiAgICBkaXYucmVjdCB7CiAg ICAgIHdpZHRoOiAyMDBweDsKICAgICAgaGVpZ2h0OiAyMDBweDsKICAgICAgZGlzcGxheTogaW5s aW5lLWJsb2NrOwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKICAgICAgbWFyZ2luOiAx MHB4OwogICAgfQogICAgZGl2LmNpcmNsZSB7CiAgICAgIHdpZHRoOiAyMDBweDsKICAgICAgaGVp Z2h0OiAyMDBweDsKICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICBiYWNrZ3JvdW5k LWNvbG9yOiBsaW1lOwogICAgICAtd2Via2l0LWNsaXAtcGF0aDogdXJsKCNjaXJjbGUtY2xpcCk7 CiAgICAgIGNsaXAtcGF0aDogdXJsKCNjaXJjbGUtY2xpcCk7CiAgICB9CiAgPC9zdHlsZT4KPC9o ZWFkPgo8Ym9keT4KCiAgPGRpdiBjbGFzcz0icmVjdCI+PGRpdiBjbGFzcz0iY2lyY2xlIj48L2Rp dj48L2Rpdj4KICA8ZGl2IGNsYXNzPSJyZWN0Ij48ZGl2IGNsYXNzPSJjaXJjbGUiPjwvZGl2Pjwv ZGl2PgogIDxkaXYgY2xhc3M9InJlY3QiPjxkaXYgY2xhc3M9ImNpcmNsZSI+PC9kaXY+PC9kaXY+ CiAgPGRpdiBjbGFzcz0icmVjdCI+PGRpdiBjbGFzcz0iY2lyY2xlIj48L2Rpdj48L2Rpdj4KICA8 YnIvPgogIDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAw IiBoZWlnaHQ9IjIwMCI+CiAgICA8ZGVmcz4KICAgICAgPGNsaXBQYXRoIGlkPSJjaXJjbGUtY2xp cCI+CiAgICAgICAgPGNpcmNsZSBjeD0iNTAlIiBjeT0iNTAlIiByPSI1MCUiLz4KICAgICAgPC9j bGlwUGF0aD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBo ZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEw MCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ieWVsbG93IiBjbGlwLXBhdGg9InVybCgjY2lyY2xlLWNs aXApIi8+CiAgPC9zdmc+CjwvYm9keT4KPC9odG1sPg== 246775 2015-02-17 15:59:15 -0800 2015-02-17 15:59:15 -0800 Test case -- Add translateZ(0) test061.html text/html 1072 sabouhallawa PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICA8c3R5bGU+CiAgICBkaXYucmVjdCB7CiAg ICAgIHdpZHRoOiAyMDBweDsKICAgICAgaGVpZ2h0OiAyMDBweDsKICAgICAgZGlzcGxheTogaW5s aW5lLWJsb2NrOwogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjsKICAgICAgbWFyZ2luOiAx MHB4OwogICAgfQogICAgZGl2LmNpcmNsZSB7CiAgICAgIHdpZHRoOiAyMDBweDsKICAgICAgaGVp Z2h0OiAyMDBweDsKICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrOwogICAgICBiYWNrZ3JvdW5k LWNvbG9yOiBsaW1lOwogICAgICAtd2Via2l0LWNsaXAtcGF0aDogdXJsKCNjaXJjbGUtY2xpcCk7 CiAgICAgIGNsaXAtcGF0aDogdXJsKCNjaXJjbGUtY2xpcCk7CiAgICAgIC13ZWJraXQtdHJhbnNm b3JtOiB0cmFuc2xhdGVaKDApOwogICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgICB9 CiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KCiAgPGRpdiBjbGFzcz0icmVjdCI+PGRpdiBjbGFz cz0iY2lyY2xlIj48L2Rpdj48L2Rpdj4KICA8ZGl2IGNsYXNzPSJyZWN0Ij48ZGl2IGNsYXNzPSJj aXJjbGUiPjwvZGl2PjwvZGl2PgogIDxkaXYgY2xhc3M9InJlY3QiPjxkaXYgY2xhc3M9ImNpcmNs ZSI+PC9kaXY+PC9kaXY+CiAgPGRpdiBjbGFzcz0icmVjdCI+PGRpdiBjbGFzcz0iY2lyY2xlIj48 L2Rpdj48L2Rpdj4KICA8YnIvPgogIDxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAv c3ZnIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+CiAgICA8ZGVmcz4KICAgICAgPGNsaXBQYXRo IGlkPSJjaXJjbGUtY2xpcCI+CiAgICAgICAgPGNpcmNsZSBjeD0iNTAlIiBjeT0iNTAlIiByPSI1 MCUiLz4KICAgICAgPC9jbGlwUGF0aD4KICAgIDwvZGVmcz4KICAgIDxyZWN0IHg9IjAiIHk9IjAi IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InJlZCIvPgogICAgPHJlY3QgeD0iMCIg eT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0ieWVsbG93IiBjbGlwLXBhdGg9 InVybCgjY2lyY2xlLWNsaXApIi8+CiAgPC9zdmc+CjwvYm9keT4KPC9odG1sPg==