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 Rendering

Assignee:

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:

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

Frédéric Wang (:fredw)

Reported 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.

Attachments
testcase (473 bytes, text/html) 2012-08-07 05:33 PDT, Frédéric Wang (:fredw)	no flags	Details
Another test case. (697 bytes, text/html) 2012-11-18 21:41 PST, Neil	no flags	Details
Safari 15.5 differs from other browsers (524.02 KB, image/png) 2022-06-17 16:43 PDT, Ahmad Saleem	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Frédéric Wang (:fredw)

Comment 1 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.

Neil

Comment 2 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.

Eric Seidel (no email)

Comment 3 2012-11-18 22:01:47 PST

SVG trees don't have RenderLayers. It's a loooong standing bug. :(

Nikos

Comment 4 2020-09-01 12:38:43 PDT

Not just span everything, see https://stackoverflow.com/questions/63690664/safari-macos-foreign-object-not-positioned-properly-inside-svg

Ahmad Saleem

Comment 5 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!

Radar WebKit Bug Importer

Comment 6 2022-06-17 16:44:04 PDT

<rdar://problem/95422479>

Simon Fraser (smfr)

Comment 7 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 ***

Note You need to log in before you can comment on or make changes to this bug.