Complex issue with Marketo and Safari

[cjoplin]

I have a seemingly simple A/B test we are trying to set up by swapping a header image and rearranging some copy. It seemed simple enough, but once I got the test built, it wouldn't function properly. On the page is a Marketo form, and anytime I would modify the CSS in the main body of the page, it would duplicate the form, regardless of how much I modified the CSS. After some adjusting and talking with IT, it was determined I have to do all of the work within the specific divs so as to not call Target to the form code. I was able to manipulate the code to get it to sort of function, but we ran into issues with the images not responding properly to breakpoints, but only in Safari. We set min-widths to each of the breakpoints and it largely functions in Chrome, but the mobile image in Safari doesn't display properly. Our It department indicated that Safari can be very finicky with code, so we have tried to finesse as best we can, but we have hit a wall. It also appears that Target is creating a new <picture> string, causing our code the be a picture within a picture, which I'm sure is causing all sorts of issues in and of itself. I've tried moving all the code to in-line to try and override any issues with CSS, but that doesn't seem to help either. I'm out of options at this point. 

[SundeepKatepally · Accepted solution]

details are not clear, but i will try to answer. Looks like you are Personalizing Marketo Form.

With target you need to remember first the sequence i.e. when is the target getting executed , before that form markup is created or before ?

Also , target will not all any html by its own , in your case you are talking about <picture> tag , unless it is part of the activity markup modification.

[cjoplin]

Apologies as it's just a tough thing to explain. I am modifying a header image and moving some text around on the page. The challenge is when if I modify the CSS, which is contained within the same div as the code for the Marketo form, it causes the form to appear twice within the test. I have had to modify the specific div containing the header image and we have had issues with Safari treating the breakpoints for the responsive designs incorrectly. We have tried modifying the min and max width separately. We have the correct size images. Safari seems to be defaulting to what is farther down the page in a stylesheet versus what we have coded in-line.The target code is executing first on the page, just fyi.