Bug 93358

Summary: inline-block span positioned "relative" inside foreignObject are not scaled correctly
Product: WebKit Reporter: Frédéric Wang (:fredw) <fred.wang>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: ahmad.saleem792, ap, eric, fraser, info, krit, pdr, robert, simon.fraser, tony, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Bug Depends on:    
Bug Blocks: 84012, 126516    
Attachments:
Description Flags
testcase
none
Another test case.
none
Safari 15.5 differs from other browsers none

Description Frédéric Wang (:fredw) 2012-08-07 05:33:27 PDT 
Created attachment 156918 [details]
testcase

A MathJax user reported that the HTML+CSS code generated by MathJax to display mathematical formulas is not rendered correctly in Webkit when scaled inside SVG:

https://github.com/mathjax/MathJax/issues/279

The code generated by MathJax contains many <span>'s and it's hard to say what the problem is. However, I think I have isolated one issue with <span style="display: inline-block; position: relative;">, which are used everywhere in the generated code.

In the attached testcase, such a span is used to draw a 50x50 red rectangle. I use SVG to scale it by a factor of 2. In Firefox, it thus fits in the 100x100 black frame. However in Webkit this rectangle is still rendered with a size of 50x50. Note that if you use "position: static;", it is correctly scaled.
Comment 1 Frédéric Wang (:fredw) 2012-08-07 05:37:46 PDT 
Of course, this affects both coordinates and size. You can try to use "left: 25px; top: 25px; width: 25px; height: 25px;" in the testcase.
Comment 2 Neil 2012-11-18 21:41:40 PST 
Created attachment 174887 [details]
Another test case.

This bug prevents the use of Closure UI widgets in SVG.  Attached is an independently created testcase.  Works fine in Gecko.
Comment 3 Eric Seidel (no email) 2012-11-18 22:01:47 PST 
SVG trees don't have RenderLayers.  It's a loooong standing bug. :(
Comment 5 Ahmad Saleem 2022-06-17 16:43:36 PDT 
Created attachment 460320 [details]
Safari 15.5 differs from other browsers

I am able to reproduce this bug in Safari 15.5 on macOS based on attached "Another Test", it is also reproducible using other test case but I am attaching just one screenshot for reference. All other browsers match each other as shown in the screenshot as well. Thanks!
Comment 6 Radar WebKit Bug Importer 2022-06-17 16:44:04 PDT 
<rdar://problem/95422479>
Comment 7 Simon Fraser (smfr) 2022-06-17 20:35:29 PDT 
position:relative triggers RenderLayer, so dup of bug 23113.

*** This bug has been marked as a duplicate of bug 23113 ***