Code widget showing different size in google chrome vs safari

Custom code
1

Hello,

I have been trying to implement some widgets from external platforms using the code widget. The problem i am facing is that the widget is scaling differently in google chrome and safari. When i dont use css it shows true to size in safari but way too big in google chrome so I tried this code to fix it:

}div[data-id=“66e17324e7b74ef6694ce7f3”] iframe {
width: 100% !important;
height: 100% !important;
transform: scale(0.5); /* Adjust scale /
transform-origin: middle;
position: absolute; / Keep the iframe in place /
top: 0; / Adjust as needed /
left: 0; / Adjust as needed /
margin: 0; / Reset margin if necessary */
padding: 0;

but then it shows true to size in google chrome but tiny in safari. How to fix this?

Thank you:)

2

you could sniff which browser is been used and set up different transform sclae value for them.
(or check the dev tools. I think RM already does it and is adding classes like “issafari” to the html div, then you would just read our the classes, build a function around and assign your needed transform css values.)

I also had my problems with safari many times. its doing so many things differently than the others. Often a dirty codearound was needed.

1 Like