5

UPDTATE

Since Apple are $2 trillion company let's try and get them to fix this by submitting a bug report here: https://www.apple.com/feedback/safari.html

https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1

In Chrome and Firefox there are no issues but here is the issue in safari:enter image description here

its supposed to look like in chrome:

If I add fixed style="position: fixed" to the outer div then they position correct, but ther size is still the smaller one in safari.

I tried adding Body to the root of an object but that just made them disappear completely from Safari. Also this post mentions it:

Safari is not respecting scaling applied to a foreignObject

You can see very clearly hear that safari (new ie) does not respect the scaling

enter image description here

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Nikos
  • 7,295
  • 7
  • 52
  • 88
  • Could you please provide a [minimum reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) for us to test? Could it be related to [this bug](https://bugs.webkit.org/show_bug.cgi?id=23113)? – Jan Stránský Sep 01 '20 at 19:05
  • not sure if its worth it, I think it's clear from the bug that it's a serious bug, but i will make you one – Nikos Sep 01 '20 at 19:48
  • I think it should not take much time and probably would also be good for you for testing, to see where exactly the discrepancy comes from. I overcame this problem pre-converting foreign object content into an ``, which works OK on Safari. Obviously, it is not much universal solution, but is an option.. – Jan Stránský Sep 01 '20 at 19:57
  • check this, see how different the sizes are of the letter 2 https://codepen.io/quantuminformation/pen/yLOzLKa – Nikos Sep 01 '20 at 20:31
  • image works fine, but I need html content due to the dynamic nature of the graphics – Nikos Sep 01 '20 at 20:32
  • I started off with image and other native svg elements but quickly outgrew them – Nikos Sep 01 '20 at 20:32
  • Although the issue I'm having on the website is that the items are scaled down – Nikos Sep 01 '20 at 20:45
  • in the code pen the 2 text is waaay larger – Nikos Sep 01 '20 at 20:46
  • ill deploy my real example to my staging server if that helps? – Nikos Sep 01 '20 at 20:53
  • Another option I have used for elements that would be on top: create separate `div` for them and position and transform them to the place where they should be. Maybe I will summarize the approaches if I find time.. – Jan Stránský Sep 01 '20 at 20:54
  • Thanks for the example, but I think this toy simple one is for testing and illustration better than the real one (if it reproduces the error) – Jan Stránský Sep 01 '20 at 20:55
  • 2
    i want to avoid using js to position stuff, as its a rabbit hole) – Nikos Sep 01 '20 at 20:55
  • 2
    see https://stackoverflow.com/questions/54221528/safari-is-not-respecting-scaling-applied-to-a-foreignobject - its a bug, and there is no good workaround – ccprog Sep 02 '20 at 00:48
  • 1
    @ccprog looks like FO is unusable atm, time to go back to basic svg. Safari the new ie – Nikos Sep 02 '20 at 07:48
  • This has already been reported [as a webkit bug](https://bugs.webkit.org/show_bug.cgi?id=23113). Safari feedback is not the right mechanism. Note that webkit is open source so you could always fix it yourself. – Robert Longson Sep 02 '20 at 09:22
  • I sincerely doubt I am able to fix SVG bugs that have been sitting for 10 years – Nikos Sep 02 '20 at 09:30

0 Answers0