Replies: 2 comments
-
Anyone please? |
Beta Was this translation helpful? Give feedback.
0 replies
-
You may be running into a flexbug—maybe review that link and see if anything stands out? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Really need some help with this please. I've now spent several days trying to fix this problem and I can't find a solution.
I have a 3 column Bootstrap 5 layout with a auto width column middle column that contains an SVG.
I've made the layout 100% height and I have the middle column responsive with the SVG taking up the full width of the auto width column.
Code pen example here
If you check it in FF and Chrome (win & mac OS) in non maximised browser or using dev tools the columns all scale as I expect and the SVG and middle column scale properly.
However, if you look at it in MacOS Safari (14.1.1) the SVG doesn't scale properly (gap either side of the SVG when scaling down) and only resizes properly if you refresh the browser.
From what I can see there seems to be a problem with the way Safari handles the SVG width when it isn't explicitly set, where the other browsers seem to handle it fine. I don't know if there is some sort of bug in Safari where it doesn't handle the width of the SVG when the browser window is resized but I'm guessing. Or possibly a problem with the flex: 0 0 auto; on the col-auto BS column.
I've tried multiple safari workarounds and nothing I can find by googling seems to work. Any help gratefully received.
Thanks
Beta Was this translation helpful? Give feedback.
All reactions